WordPressのフォーム入力をサイトのフロントエンドに表示することで、よりインタラクティブで魅力的なサイトにすることができます。
このアプローチでは、訪問者が見ることができる場所に重要な情報を表示することができます。例えば、好意的なレビューのハイライト、ディレクトリの作成、イベントカレンダーの表示などにこの機能を利用できます。
この投稿では、WordPressのフォーム入力をサイトに表示する手順を説明します。
なぜWordPressのフォーム入力をフロントエンドに表示するのか?
フォームはユーザーと連絡を取り合ったり、フィードバックや提案を得たり、ユーザーの問題を解決するのに役立ちます。WordPress サイトの訪問者にフォームを表示することは、特定の状況において役に立ちます。
例えば、ユーザーがオンラインフォームから送信した体験談や 製品レビューを 表示することができます。このようにして、社会的証明を活用してブランドの信頼を築き、コンバージョンを高めることができます。
また、フォームに入力された内容を表示してビジネスディレクトリを作成したり、ユーザーが送信したイベントをカレンダーに表示したり、統計情報を表示したり、オンラインフォームで収集したその他の重要な情報をサイトに表示することもできます。 あなたのビジネスに信頼性を加えながら、製品やサービスの貴重な社会的証明を提供する素晴らしい方法です。
しかし、WordPress サイトでユーザーがフォームを送信した場合、その入力内容は初期設定では非公開になります。WordPress 管理者と権限を持つユーザーだけがフォームの入力を表示できます。
以下のセクションでは Formidable Forms と WPForms を使って WordPress サイトのフロントエンドにフォームエントリーを表示する方法を紹介します。下のリンクをクリックするとお好きなセクションにジャンプできます:
準備はいいかい?チュートリアル動画から始めよう。
動画チュートリアル
もし、文章での説明がお望みなら、このまま読み進めてほしい。
方法 1: Formidable Forms を使って WordPress のフォーム入力を表示する
WordPress でフォーム入力を表示する最も簡単な方法はFormidable Forms を使うことです。Formidable Forms は人気のWordPress お問い合わせフォームプラグインで、カスタマイザー機能をすべて備えたオールインワンのフォームビルダーです。
アンケート、クイズ、支払いフォーム、イベントカレンダー、ディレクトリ、電卓などの高度なフォームなど、あらゆる種類のフォームを作成できます。
まずはあなたのサイトに Formidable Forms プラグインをインストールして有効化しましょう。ヘルプが必要な場合はWordPress プラグインのインストール方法をご覧ください。
このチュートリアルではFormidable Forms Pro を使います。Formidable FormsPro には ‘Visual Views’ アドオンが含まれているからです。
有効化した後、Formidable ” Formsにアクセスし、上部にある「+新規追加」ボタンをクリックします。
その後、お問い合わせフォーム、ユーザー登録フォーム、アンケートなど、フォームの種類を選択するポップアップが外観に表示されます。
お好きなフォームタイプを選択してください。このチュートリアルでは、ユーザーの声を集めるためのお問い合わせフォームを作成します。
次に、フォーム名と説明を入力する必要があります。
完了したら、「作成」ボタンをクリックするだけです。
フォームビルダーを使ってフォームをカスタマイズすることができます。
Formidableはドラッグ&ドロップで簡単にフォームを作成できます。左側のオプションからフォームに追加したいフォームフィールドを選択し、フォームテンプレートに配置するだけです。
カスタマイザー後、サイト上の任意の場所にフォームを埋め込むことができます。
プラグインにはフォームを追加するための複数のオプションがあります。最も簡単な方法は、フォームビルダー上部の「埋め込み」ボタンをクリックし、既存のページを選択するか、新規ページを作成してフォームを追加することです。
あるいは、WordPressのコンテンツエディターで「Formidable Forms」ブロックやショートコードブロックを使ってフォームを埋め込むこともできます。
このチュートリアルでは、「新規ページを作成」オプションを選択します。
コンテンツエディター内に入ると、Formidable Forms フォーム専用のページが作成されていることがわかります。
本番させる前に、「プレビュー」ボタンをクリックしてプレビューしておくとよいだろう。
外観に満足したら、ページを公開してください。
フォームが公開され、エントリーを受け取るようになったら、Formidable Forms の ‘Visual Views’ アドオンをインストールして有効化してください。
WordPressのダッシュボードからFormidable ” Add-Onsにアクセスします。次に、「Visual Views」アドオンまでスクロールダウンし、「インストール」ボタンをクリックします。
アドオンを有効化したら、WordPressダッシュボードからFormidable ” 表示に移動できます。
次に、一番上の「+新規追加」ボタンをクリックします。
ポップアップ・ウィンドウが外観表示されます。ここで、グリッド、テーブル、カレンダー、クラシック表示などの表示タイプを選択する必要があります。
このチュートリアルでは、フォームのエントリーを表示するために「グリッド」表示を選択します。
次のステップは、表示用のデータソースを選択することです。
フォームからのエントリーを使用する」ドロップダウンメニューをクリックして、フォームを選択してください。表示名を入力することもできます。
データソースを選択したら、「表示作成」ボタンをクリックします。
これで Formidable Forms のビュービルダーが起動します。
まずは「レイアウト・ビルダー」ボタンをクリックしてください。
次に、フォーム・エントリーを表示するレイアウトを選択する必要があります。
上部にある設定オプションからレイアウトを選択するだけです。フォームのエントリーを表示するために複数のレイアウトを追加することができます。
レイアウトを選択したら、「レイアウトを保存」ボタンをクリックします。
ボタンをクリックして表示ビルダーにコンテンツを追加することができます。フォームエントリーのレイアウトをカスタマイズしたり、フォームエントリーの前後にコンテンツを追加するオプションがあります。
プラグインは、左側の「Grid Style Settings」パネルで、タイポグラフィ、背景色、枠線などを変更するオプションも提供している。
また、’表示名’フィールドの下にショートコードが表示されますが、これはサイト上でフォームエントリーを表示する際に必要になります。
グリッド・スタイル設定」パネルには、さらに高度な設定があります。高度な設定では、エントリー数やページサイズなどを制限することができます。
表示のカスタマイザーが完了したら、上部にある「更新」ボタンを忘れずにクリックしてください。
次に、WordPressサイトにフォームエントリーを表示する必要があります。そのためには、’表示名’の下に与えられたショートコードをコピーしてください。
ショートコードは次のようになる:
[display-frm-data id=2410]
ショートコードをクリップボードにコピーしたら、フォームエントリーを表示したい投稿やページに移動できます。コンテンツエディターで、’ショートコード’ブロックを追加するだけです。
先ほどコピーしたショートコードをショートコード・ブロックに入力する。
その後、ページを公開する前にプレビューしたほうがいいかもしれない。
これで、あなたのサイトにアクセスして、フォーム入力の動作を確認することができます。
デモサイトではこんな感じです:
方法 2: 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スタイルを使用して表示をさらにカスタマイズすることができます。
ボーナスのヒントGDPR対応フォームの作成
一般データ保護規則(GDPR)は、2018年5月25日にスタートした欧州連合(EU)の法律である。これは、EUの人々が自分の個人データをよりコントロールできるようにし、企業がこのデータを適切に取り扱えるようにすることをすべて目的としている。
WordPressサイトをお持ちの場合、特にフォームを通じてユーザー情報を収集していることでしょう。あなたのフォームがGDPRのルールに従うことを確認するために、あなたは?
- 明確な同意を得る:ユーザーに、個人情報を保存・利用しても良いかどうかを尋ねる。
- アクセスリクエスト:ユーザーにユーザーに関する個人情報を閲覧させます。
- 削除リクエスト:ユーザーが自分のデータをサイトから削除できるようにします。
詳しくは、WordPressでGDPRに準拠したフォームを作成する方法についてのガイドをご覧ください。すべての疑問にわかりやすくお答えします。
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.
Melanie
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
We don’t have a recommended method at the moment but should that change we will be sure to share!
管理者