WordPressのフォーム入力をサイトのフロントエンドに表示したいですか?
フロントエンドにフォームエントリーを表示することで、訪問者に重要な情報を見せることができます。好意的なレビューの表示、ディレクトリの作成、イベントカレンダーの表示などに使用できます。
この投稿では、WordPressのフォーム入力をサイトに表示する方法を紹介します。
なぜWordPressのフォーム入力をフロントエンドに表示するのか?
フォームはユーザーと連絡を取り合ったり、フィードバックや提案を得たり、ユーザーの問題を解決するのに役立ちます。WordPress サイトの訪問者にフォームを表示することは、特定の状況において役に立ちます。
例えば、ユーザーがオンラインフォームから送信した体験談や 製品レビューを 表示することができます。このようにして、社会的証明を活用してブランドの信頼を築き、コンバージョンを高めることができます。
また、フォームに入力された内容を表示してビジネスディレクトリを作成したり、ユーザーが送信したイベントをカレンダーに表示したり、統計情報を表示したり、オンラインフォームで収集したその他の重要な情報をサイトに表示することもできます。 あなたのビジネスに信頼性を加えながら、製品やサービスの貴重な社会的証明を提供する素晴らしい方法です。
しかし、初期設定では、ユーザーが WordPress サイトのフォームを送信すると、その入力内容は非公開になります。WordPress 管理者と権限を持つユーザーだけがフォームの入力を表示できます。
Formidable FormsとWPFormsを使ってWordPressサイトのフロントエンドにフォームエントリーを表示する方法を見てみましょう。下のリンクをクリックするとお好きなセクションにジャンプできます。
動画チュートリアル
文章での説明がお望みなら、このまま読み進めてほしい。
Formidable Formsを使ってWordPressのフォーム入力を表示する
WordPress でフォーム入力を表示する最も簡単な方法はFormidable Forms を使うことです。Formidable Forms は人気のWordPress お問い合わせフォームプラグインで、カスタマイザー機能をすべて備えたオールインワンのフォームビルダーです。
アンケート、クイズ、支払いフォーム、イベントカレンダー、ディレクトリ、電卓のような高度なフォームなど、すべて作成できます。
まず、あなたのサイトに Formidable Forms プラグインをインストールして有効化する必要があります。助けが必要な場合はWordPress プラグインのインストール方法をご覧ください。
このチュートリアルではFormidable Forms Pro を使います。Formidable FormsPro には Visual Views アドオンが含まれているからです。
有効化した後、Formidable ” Formsにアクセスし、上部にある「+新規追加」ボタンをクリックします。
その後、お問い合わせフォーム、ユーザー登録フォーム、アンケートなど、フォームの種類を選択するポップアップが表示されます。
お好みのフォームタイプを選択してください。このチュートリアルでは、ユーザーの声を集めるためのお問い合わせフォームを作成します。
次に、フォーム名と説明を入力する必要があります。
完了したら、「作成」ボタンをクリックするだけです。
フォームビルダーを使ってフォームをカスタマイズできるようになりました。
Formidableはドラッグアンドドロップで簡単にフォームを作成できます。左側のオプションからフォームに追加したいフォームフィールドを選択し、フォームテンプレートに配置するだけです。
カスタマイザー後、あなたのサイトの任意の場所にフォームを埋め込んでください。
プラグインにはフォームを追加するための複数のオプションがあります。最も簡単な方法は、フォームビルダー上部の ‘埋め込み’ ボタンをクリックし、既存のページを選択するか、新規ページを作成してフォームを追加することです。
また、Formidable FormsブロックやWordPressコンテンツエディターのショートコードブロックを使ってフォームを埋め込むこともできます。
次に、ページに名前を付けてプレビューすることができます。
外観に満足したら、ページを公開してください。
フォームが公開され、エントリーが集まり始めたら、Formidable Forms の Visual Views アドオンをインストールして有効化する必要があります。
WordPressダッシュボードからFormidable ” Add-Onsにアクセスします。次に、「Visual Views」アドオンまでスクロールダウンし、「インストール」ボタンをクリックします。
アドオンを有効化したら、WordPressダッシュボードからFormidable ” 表示に移動できます。
その後、上部の「+新規追加」ボタンをクリックするだけです。
次に、表示タイプを選択するポップアップウィンドウが表示されます。プラグインには、グリッド、テーブル、カレンダー、クラシック表示があります。
このチュートリアルでは、フォームのエントリーを表示するために「グリッド」表示を使用します。
その後、表示用のデータソースを選択する必要があります。
フォームからのエントリーを使用する」ドロップダウンメニューをクリックして、フォームを選択してください。表示名を入力する設定もあります。
データソースを選択したら、「表示作成」ボタンをクリックします。
これで Formidable Forms のビュービルダーが起動します。
まずは「レイアウト・ビルダー」ボタンをクリックしてください。
次に、フォーム・エントリーを表示するレイアウトを選択する必要があります。
上部にある設定オプションからレイアウトを選択するだけです。フォームのエントリーを表示するために複数のレイアウトを追加することができます。
レイアウトを選択したら、「レイアウトを保存」ボタンをクリックします。
次に、「+」ボタンをクリックして表示ビルダーにコンテンツを追加することができます。フォームエントリーのレイアウトをカスタマイズしたり、フォームエントリーの前後にコンテンツを追加するオプションがあります。
このプラグインは、左側のグリッドスタイル設定パネルで、タイポグラフィ、背景色、枠線などを変更するオプションも提供している。
また、表示名フィールドの下にショートコードが表示されますが、これはサイト上でフォームエントリーを表示する際に必要になります。
グリッド・スタイル設定パネルには、さらに高度な設定があります。高度な設定では、エントリー数やページサイズなどを制限することができます。
表示のカスタマイザーが完了したら、上部にある「更新」ボタンを忘れずにクリックしてください。
次に、WordPressサイトにフォームエントリーを表示する必要があります。そのためには、表示名の下にあるショートコードをコピーしてください。
ショートコードは次のようになる:
[display-frm-data id=2410]
その後、フォームエントリーを表示したい投稿やページに移動します。コンテンツエディターに入ったら、’ショートコード’ブロックを追加するだけです。
先ほどコピーしたショートコードをショートコード・ブロックに入力する。
その後、ページをプレビューして公開することができます。
これで、あなたのサイトにアクセスして、フォーム入力の動作を確認することができます。
デモサイトではこんな感じです:
WPFormsを使ったWordPressフォーム入力の表示
WordPressサイトのフロントエンドにフォーム入力を表示するもう一つの方法はWPFormsを使うことです。ただし、この方法はコードの編集が必須なので、コーディングの知識がある上級ユーザーにお勧めします。
WPFormsはWordPressに最適なお問い合わせフォームプラグインで、ドラッグ&ドロップのフォームビルダーを使って様々なタイプのフォームを作成することができます。
WordPressのダッシュボードでフォームのエントリを確認したい場合は、WPForms Proバージョンが必要です。また、無料で使用できるWPForms Liteバージョンもあり、こちらはすべてのフォームエントリのメール通知を送信します。
まず、WPFormsプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。
次に、WPFormsを使ってオンラインフォームを作成する必要があります。WordPressでお問い合わせフォームを作成する方法については、ステップバイステップのガイドをご覧ください。
フォーム入力ができるようになったら、テーマのfunctions.phpファイルに以下のコードを入力する必要があります。少しでも間違えるとサイトが壊れてしまいますので、WPCodeを使用することをお勧めします。
詳しくは、WordPressでカスタマイザーコードを簡単に追加する方法をご覧ください。
/**
* Custom shortcode to display WPForms form entries in table view.
*
* Basic usage: [wpforms_entries_table id="FORMID"].
*
* Possible shortcode attributes:
* id (required) Form ID of which to show entries.
* user User ID, or "current" to default to current logged in user.
* fields Comma separated list of form field IDs.
* number Number of entries to show, defaults to 30.
*
* @link https://wpforms.com/developers/how-to-display-form-entries/
*
* Realtime counts could be delayed due to any caching setup on the site
*
* @param array $atts Shortcode attributes.
*
* @return string
*/
function wpf_entries_table( $atts ) {
// Pull ID shortcode attributes.
$atts = shortcode_atts(
[
'id' => '',
'user' => '',
'fields' => '',
'number' => '',
'type' => 'all' // all, unread, read, or starred.
],
$atts
);
// Check for an ID attribute (required) and that WPForms is in fact
// installed and activated.
if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
return;
}
// Get the form, from the ID provided in the shortcode.
$form = wpforms()->form->get( absint( $atts['id'] ) );
// If the form doesn't exists, abort.
if ( empty( $form ) ) {
return;
}
// Pull and format the form data out of the form object.
$form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
// Check to see if we are showing all allowed fields, or only specific ones.
$form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
// Setup the form fields.
if ( empty( $form_field_ids ) ) {
$form_fields = $form_data['fields'];
} else {
$form_fields = [];
foreach ( $form_field_ids as $field_id ) {
if ( isset( $form_data['fields'][ $field_id ] ) ) {
$form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
}
}
}
if ( empty( $form_fields ) ) {
return;
}
// Here we define what the types of form fields we do NOT want to include,
// instead they should be ignored entirely.
$form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
// Loop through all form fields and remove any field types not allowed.
foreach ( $form_fields as $field_id => $form_field ) {
if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
unset( $form_fields[ $field_id ] );
}
}
$entries_args = [
'form_id' => absint( $atts['id'] ),
];
// Narrow entries by user if user_id shortcode attribute was used.
if ( ! empty( $atts['user'] ) ) {
if ( $atts['user'] === 'current' && is_user_logged_in() ) {
$entries_args['user_id'] = get_current_user_id();
} else {
$entries_args['user_id'] = absint( $atts['user'] );
}
}
// Number of entries to show. If empty, defaults to 30.
if ( ! empty( $atts['number'] ) ) {
$entries_args['number'] = absint( $atts['number'] );
}
// Filter the type of entries all, unread, read, or starred
if ( $atts['type'] === 'unread' ) {
$entries_args['viewed'] = '0';
} elseif( $atts['type'] === 'read' ) {
$entries_args['viewed'] = '1';
} elseif ( $atts['type'] === 'starred' ) {
$entries_args['starred'] = '1';
}
// Get all entries for the form, according to arguments defined.
// There are many options available to query entries. To see more, check out
// the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
$entries = wpforms()->entry->get_entries( $entries_args );
if ( empty( $entries ) ) {
return '<p>No entries found.</p>';
}
ob_start();
echo '<table class="wpforms-frontend-entries">';
echo '<thead><tr>';
// Loop through the form data so we can output form field names in
// the table header.
foreach ( $form_fields as $form_field ) {
// Output the form field name/label.
echo '<th>';
echo esc_html( sanitize_text_field( $form_field['label'] ) );
echo '</th>';
}
echo '</tr></thead>';
echo '<tbody>';
// Now, loop through all the form entries.
foreach ( $entries as $entry ) {
echo '<tr>';
// Entry field values are in JSON, so we need to decode.
$entry_fields = json_decode( $entry->fields, true );
foreach ( $form_fields as $form_field ) {
echo '<td>';
foreach ( $entry_fields as $entry_field ) {
if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
break;
}
}
echo '</td>';
}
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
$output = ob_get_clean();
return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );
無料のWPCodeプラグインを使用してサイトにコードを追加したら、フォームのエントリーを表示するために、以下のショートコードを任意のページや投稿に入力する必要があります。
[wpforms_entries_table id="FORMID"]
FORMIDをフォームのIDに置き換えるだけです。
フォーム ID はWPForms ” All Formsで Shortcode カラムを見ればわかります。
ショートコードを追加するには、新規ページを作成するか、既存のページを編集するだけです。
次に、「ショートコード」ブロックを追加する。
ブロックを追加したら、ショートコードを入力するだけです。
WordPressページをプレビューし、上部にある「公開する」ボタンをクリックします。
フロントエンドでのフォーム入力のプレビューはこんな感じです:
必要に応じて、カスタムCSSスタイルを使用して表示をさらにカスタマイズすることができます。
この投稿が、WordPress のフォーム入力をサイトに表示する方法を学ぶのにお役に立てば幸いです。カスタム WordPress テーマの作成方法や、WordPress のエキスパートが選ぶ最高のお問い合わせフォームプラグインもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Melanie says
I made this table for a front end page for a Wpforms form. But I’d like to add a filter where users can select date range like you see on the back end when you view entries. How can I do that?? Thanks!
WPBeginner Support says
We don’t have a recommended method at the moment but should that change we will be sure to share!
管理者