WordPressサイトでフォームの送信を収集しているのに、訪問者には一切表示していないのですか？それは機会損失です。
レビュー、メンバーリスト、イベントカレンダーなどのエントリーをサイトに表示すると、それらに目的が生まれます。訪問者が情報を探したり、実際のフィードバックを見たり、コミュニティ内の人々やイベントを発見したりするのに役立ちます。
WPBeginnerでは、多くのサイトオーナーが隠れたフォームデータを役立つものにするのを支援してきました。多くの方法をテストした後、非常にうまく機能する2つの方法を見つけました。
このガイドでは、ディレクトリ、ショーケース、またはコミュニティサイトを運営しているかどうかにかかわらず、WordPressフォームのエントリーをサイトに表示する方法を2つの簡単な方法でご紹介します。🙌
WordPressフォームの投稿をフロントエンドに表示する理由
フォームエントリーを表示するとは、訪問者が送信したデータをWordPressウェブサイトの公開ページに表示することです。最大のメリットの1つは、ソーシャルプルーフを構築することです。
デフォルトでは、フォームの送信は管理者にのみ表示されます。
しかし、お客様の声や実際の顧客フィードバックを使用した製品レビューを表示することは、信頼を築くための素晴らしい方法です。実際、ある調査では、レビューを表示することでコンバージョン率を最大270%向上させることができるとされています。
また、フォームエントリーを使用して、ビジネスディレクトリ、メンバーリスト、またはカレンダー上のユーザー提出イベントのような、訪問者にとって役立つその他のリソースを作成することもできます。
次のセクションでは、Formidable FormsとWPFormsを使用して、WordPressウェブサイトのフロントエンドにフォームエントリを表示する方法を説明します。
このガイドで説明するすべての内容を簡単に紹介します。
- Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
- Displaying WordPress Form Entries by Using WPForms (Advanced)
- ボーナスのヒント：GDPR準拠のフォームを作成する
- WordPressでフォームエントリを表示することに関するよくある質問
- 動画チュートリアル：WordPressフォームエントリの表示
- WordPressフォームの使用に関する追加リソース
さあ、始めましょう。
方法1：Formidable Formsを使用したWordPressフォームエントリの表示
WordPress でフォームエントリを表示する最も簡単な方法は、Formidable Forms を使用することです。これは人気の WordPress お問い合わせフォームプラグイン であり、多くのカスタマイズ機能を備えたオールインワンのフォームビルダーを提供します。
イベントカレンダー、ディレクトリ、計算機のような高度なフォームを含む、あらゆる種類のフォームを作成できます。
Formidable Formsのすべての機能を学ぶために徹底的にテストしました。当社の完全なFormidable Formsレビューで、なぜ推奨するのかを確認できます。
ステップ1：Formidable Formsの設定
開始するには、サイトにFormidable Formsプラグインをインストールして有効化しましょう。このチュートリアルでは、「Visual Views」アドオンが含まれているため、Formidable Forms Proバージョンを使用します。
ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化後、Formidable » Forms に移動し、上部にある「+ Add New」ボタンをクリックします。
ステップ2：フォームの作成
その後、連絡フォーム、 ユーザー登録フォーム、アンケート、その他のフォームタイプを選択するポップアップが表示されます。
好みのフォームタイプを選択してください。このチュートリアルでは、ユーザーから testimonial を収集するための連絡フォームを作成します。
次に、フォーム名と説明を入力する必要があります。
完了したら、「作成」ボタンをクリックするだけです。
これで、フォームビルダーを使用してフォームをカスタマイズできます。
Formidable は、非常に使いやすいドラッグ＆ドロップビルダーを提供しています。左側のオプションからフォームに追加したい任意のフォームフィールドを選択し、フォームテンプレートに配置するだけです。
ステップ3：フォームの公開
カスタマイズ後、ウェブサイトのどこにでもフォームを埋め込むことができます。
このプラグインは、フォームを追加するための複数のオプションを提供します。最も簡単な方法は、上部にあるフォームビルダーの「埋め込み」ボタンをクリックし、既存のページを選択するか、新しいページを作成してフォームを追加することです。
または、WordPressコンテンツエディターの「Formidable Forms」ブロックまたはショートコードブロックを使用してフォームを埋め込むこともできます。
このチュートリアルでは、「新しいページを作成」オプションを選択します。
コンテンツエディターに入ると、Formidable Formsフォーム専用のページが作成されていることがわかります。
公開する前に、「プレビュー」ボタンをクリックしてプレビューすることをお勧めします。
表示に満足したら、ページを公開してください。
ステップ4：ビジュアルビューの有効化
フォームが公開され、投稿の受信が開始されたら、Formidable Formsで「Visual Views」アドオンをインストールして有効化したいと思うでしょう。
これを行うには、WordPress管理画面からFormidable » Add-Onsに移動するだけです。次に、「Visual Views」アドオンまでスクロールダウンし、「Install」ボタンをクリックします。
アドオンがアクティブになったら、Formidable » Viewsページに移動できます。
次に、上部にある「+新規追加」ボタンをクリックしてください。
ポップアップウィンドウが表示されます。ここで、グリッド、 テーブル、カレンダー、またはクラシックビューなどのビュータイプを選択する必要があります。
このチュートリアルでは、フォームのエントリを表示するために「グリッド」ビューを選択します。
次のステップは、ビューのデータソースを選択することです。
「Use Entries from Form」ドロップダウンメニューをクリックして、フォームを選択してください。ビュー名を入力することもできます。
データソースを選択したら、「ビューを作成」ボタンをクリックするだけです。
これにより、Formidable Forms のビュービルダーが起動します。
開始するには、「レイアウトビルダー」ボタンをクリックしてください。
次に、フォームエントリを表示するためのレイアウトを選択する必要があります。
上部にあるオプションからレイアウトを選択するだけです。フォームの入力内容を表示するために複数のレイアウトを追加できます。
レイアウトを選択したら、「レイアウトを保存」ボタンをクリックしてください。
次に、「+」ボタンをクリックしてビュービルダーにコンテンツを追加できます。フォームエントリのレイアウトをカスタマイズしたり、フォームエントリの前後にコンテンツを追加したりするオプションがあります。
プラグインでは、タイポグラフィ、背景色、境界線などを左側の「グリッドスタイル設定」パネルで変更するオプションも提供されます。
また、「View Name」フィールドの下にショートコードが表示されます。これは、サイトにフォームの投稿を表示する際に必要になります。
「グリッドスタイル設定」パネルには、より高度なオプションがあります。高度な設定では、エントリ数、ページサイズなどを制限できます。
表示をカスタマイズしたら、一番上にある「更新」ボタンをクリックするのを忘れないでください。
ステップ5：フロントエンドでのフォームエントリの表示
次に、フォームの入力内容をWordPressウェブサイトに表示する必要があります。そのためには、「View Name」の下にあるショートコードをコピーしてください。
ショートコードは次のようになります。
[display-frm-data id=2410]
ショートコードをクリップボードにコピーしたら、フォームの入力内容を表示したい投稿またはページに移動できます。
コンテンツエディターで、「ショートコード」ブロックを追加するだけです。
次に、先ほどコピーしたショートコードをショートコードブロックに追加します。
その後、公開する前にページをプレビューすると良いでしょう。
これで、ウェブサイトにアクセスして、フォームの投稿が機能していることを確認できます。
デモウェブサイトではこれらのようになります：
方法 2: WPForms を使用して WordPress フォームの投稿を表示する
WPFormsは、WordPressの最適なお問い合わせフォームプラグインの1つであり、フォームの入力内容を表示することもできます。この方法は、サイトにPHPコードスニペットを追加する必要があるため、より高度です。
これを行うには、すべてのフォームの入力内容をWordPressデータベースに保存するWPForms Proが必要です。無料のWPForms Liteバージョンは、入力内容をメールで送信するだけで保存しないため、この方法では機能しません。
WPBeginnerでは、お問い合わせフォームや年次ユーザー調査など、さまざまなフォームを作成するためにWPFormsを使用しています。詳細については、WPFormsの詳細レビューをご覧ください。
ステップ1：WPFormsのインストール
まず、WPFormsアカウントにサインアップしましょう。
ウェブサイトで「Get WPForms Now」ボタンをクリックするだけで、プランを購入し、アカウントを作成できます。
これが完了したら、ライセンスキーをコピーしてください。
次に、プラグインをセットアップしましょう。
これを行うには、基本的なフレームワークを提供するWPFormsプラグインの無料バージョンをWordPressリポジトリからインストールする必要があります。その後、ライセンスキーを入力して、すべてのPro機能のロックを解除します。
開始するには、WordPress管理エリアからプラグイン » 新規追加に移動できます。
次に、検索機能を使用してWPFormsプラグインをすばやく見つけます。
関連する検索結果で、「今すぐインストール」と「有効化」をクリックします。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
ステップ 2: フォームを作成し、そのエントリを表示する
有効化すると、WPForms を使用してオンラインフォームの作成を開始できます。WordPress での連絡フォームの作成方法に関するステップバイステップガイドは、こちらで確認できます。
フォームのエントリが開始されたら、次のコードをテーマのfunctions.phpファイルに入力する必要があります。
ただし、わずかな間違いでもウェブサイトが破損する可能性があることに注意してください。
そのため、WordPress の最高のコードスニペットプラグインである WPCode の使用を常にお勧めしています。
当社のパートナーブランドの中には、このプラグインを使用しているところがあります。なぜなら、サイトを壊すリスクなしに WordPress にカスタムコードスニペットを追加する最も安全で簡単な方法だからです。プラットフォームの詳細については、当社の 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 » すべてのフォーム** に移動し、ショートコード列を確認することで見つけることができます。
WPForms エントリ表示のカスタマイズ（代替案）
このショートコードをカスタマイズして、表示されるフィールドや表示されるエントリの数を変更することもできます。これは、クリーンで集中した表示を作成するのに非常に役立ちます。
いくつかの便利なオプションを以下に示します。
- 特定のフィールドを表示: 特定の列のみを表示するには、フォームのフィールドIDを持つ
fields属性を追加します。たとえば、IDが1と3のフィールドのみを表示するには、次のように使用します。[wpforms_entries_table id="123" fields="1,3"] - エントリー数を制限: 最新の5件のエントリーのみを表示するには、
number属性を追加します:[wpforms_entries_table id="123" number="5"]
各フィールドの「フィールドID」は、WPFormsビルダーでWordPressフォームを開き、そのフィールドをクリックすると見つけることができます。IDは左側の設定パネルの上部に表示されます。
ステップ3: ショートコードをページに追加する
ショートコードを追加するには、新しいページを作成するか、既存のページを編集するだけです。
次に、「ショートコード」ブロックを追加してください。
次に、ブロックにショートコードを追加するだけです。
これで、WordPressのページをプレビューし、上部にある「公開」ボタンをクリックできます。
これで完了です！
フロントエンドでのフォームエントリのプレビューは次のようになりました。
必要に応じて、カスタムCSSスタイルを使用して表示をさらにカスタマイズできます。
ボーナスのヒント：GDPR準拠のフォームを作成する
一般データ保護規則（GDPR）は、個人に対する個人データ管理の権限を強化する欧州連合の法律です。ウェブサイトがユーザーから情報を収集する場合、特にフォームを通じて収集する場合は、これらの規則に従うことが重要です。
フォームをGDPRに準拠させるには、次のことを行う必要があります。
- 明示的な同意を得る：個人情報の保存と使用について、ユーザーに許可を求めます。
- アクセスリクエストに対応する：ユーザーがあなたがお持ちの個人情報にアクセスできるようにします。
- 削除リクエストを尊重する：ユーザーがあなたのサイトからデータを削除するように要求できるようにします。
🚨 警告：上記の方法の手順は、データの収集を対象としています。このチュートリアルは、そのデータを公開することについて説明しているため、ユーザーからそのための個別の、明確な同意を得る必要があります。
最も簡単な方法は、フォームにチェックボックスを追加し、その送信があなたのWordPressウェブサイトで共有されることを明確に記載することです。
詳細については、WordPress で GDPR 準拠のフォームを作成する方法に関するガイドをご覧ください。すべての質問に分かりやすい言葉で回答します。
WordPressでフォームエントリを表示することに関するよくある質問
プラグインなしでフォームの入力内容を表示できますか？
はい、ただし非常に技術的です。WordPressデータベースにクエリを実行して結果を表示するには、カスタムPHPおよびSQLコードを記述する必要があります。Formidable FormsのようなプラグインやWPFormsのコードスニペットメソッドを使用する方が、ほとんどのユーザーにとってずっと簡単で安全です。
ユーザーが送信したデータを私のサイトに表示しても安全ですか？
そうなる可能性はありますが、注意が必要です。ユーザーのデータを公開する前に、必ず明示的な同意を得てください。
さらに、サイトに表示される前に投稿をモデレートすることが非常に重要です。不適切なコンテンツが公開されるのを防ぐために、すべての投稿を確認する必要があります。
経験則: フルネーム、メールアドレス、電話番号、自宅住所などの機密性の高い個人情報を、個別の明示的な許可なしに公開しないでください。
フォームの入力の外観をどのようにスタイル設定できますか？
このガイドのどちらの方法でも、入力のスタイルを設定できます。Formidable FormsのVisual Viewsアドオンには、色、フォント、レイアウトの組み込み設定があります。WPFormsのテーブルメソッドは、基本的なHTMLテーブルを生成し、カスタムCSSを使用してテーマに合わせてスタイル設定できます。
動画チュートリアル：WordPressフォームエントリの表示
🎬 実際に見てみましょう！ WordPress フォームのエントリーをサイトに表示するビデオチュートリアルをご覧ください：
WordPressフォームの使用に関する追加リソース
この記事が、WordPressフォームの入力内容をサイトに表示する方法を学ぶのに役立ったことを願っています。
次に、以下の他の役立つガイドも参照してください。
- オンライン注文フォームの作成方法
- WordPressフォームにクーポンコードフィールドを追加する方法
- WordPressで住所フィールドのオートコンプリートを追加する方法
- WordPressフォームで条件付きロジックを使用する方法
- WordPressフォームへの18,000件のスパムリード攻撃をブロックした方法
- WordPressフォーム使用に関する究極のガイド
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
WordPressフォームのエントリを表示するための素晴らしい記事です！Formidable Formsのセクションは非常に役立ちました。クライアントの testimonial ページにこの方法を使用しましたが、見事に機能しました。もう1つのヒント：エントリが公開される前に、特にユーザー生成コンテンツの場合は、モデレーションステップを追加することを検討してください。この追加の管理レイヤーは、エントリを関連性があり質の高いものに保ち、スパムや不適切なコンテンツを防ぐのに役立ちます。
Melanie
Wpforms のフォームのフロントエンドページのためにこのテーブルを作成しました。しかし、バックエンドでエントリーを表示する際に見られるような、ユーザーが日付範囲を選択できるフィルターを追加したいです。どうすればできますか？？よろしくお願いします！
WPBeginnerサポート
現時点では推奨する方法はありませんが、変更があった場合は必ず共有します！
管理者