Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのフォーム入力をサイトに表示する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressのフォーム入力をサイトのフロントエンドに表示したいですか?

フロントエンドにフォームエントリーを表示することで、訪問者に重要な情報を見せることができます。好意的なレビューの表示、ディレクトリの作成、イベントカレンダーの表示などに使用できます。

この投稿では、WordPressのフォーム入力をサイトに表示する方法を紹介します。

How to Display WordPress form entries on your site

なぜWordPressのフォーム入力をフロントエンドに表示するのか?

フォームはユーザーと連絡を取り合ったり、フィードバックや提案を得たり、ユーザーの問題を解決するのに役立ちます。WordPress サイトの訪問者にフォームを表示することは、特定の状況において役に立ちます。

例えば、ユーザーがオンラインフォームから送信した体験談や 製品レビューを 表示することができます。このようにして、社会的証明を活用してブランドの信頼を築き、コンバージョンを高めることができます。

また、フォームに入力された内容を表示してビジネスディレクトリを作成したり、ユーザーが送信したイベントをカレンダーに表示したり、統計情報を表示したり、オンラインフォームで収集したその他の重要な情報をサイトに表示することもできます。 あなたのビジネスに信頼性を加えながら、製品やサービスの貴重な社会的証明を提供する素晴らしい方法です。

しかし、初期設定では、ユーザーが WordPress サイトのフォームを送信すると、その入力内容は非公開になります。WordPress 管理者と権限を持つユーザーだけがフォームの入力を表示できます。

Formidable FormsとWPFormsを使ってWordPressサイトのフロントエンドにフォームエントリーを表示する方法を見てみましょう。下のリンクをクリックするとお好きなセクションにジャンプできます。

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお望みなら、このまま読み進めてほしい。

Formidable Formsを使ってWordPressのフォーム入力を表示する

WordPress でフォーム入力を表示する最も簡単な方法はFormidable Forms を使うことです。Formidable Forms は人気のWordPress お問い合わせフォームプラグインで、カスタマイザー機能をすべて備えたオールインワンのフォームビルダーです。

アンケート、クイズ、支払いフォーム、イベントカレンダー、ディレクトリ、電卓のような高度なフォームなど、すべて作成できます。

まず、あなたのサイトに Formidable Forms プラグインをインストールして有効化する必要があります。助けが必要な場合はWordPress プラグインのインストール方法をご覧ください。

このチュートリアルではFormidable Forms Pro を使います。Formidable FormsPro には Visual Views アドオンが含まれているからです。

有効化した後、Formidable ” Formsにアクセスし、上部にある「+新規追加」ボタンをクリックします。

Add a new form

その後、お問い合わせフォーム、ユーザー登録フォーム、アンケートなど、フォームの種類を選択するポップアップが表示されます。

お好みのフォームタイプを選択してください。このチュートリアルでは、ユーザーの声を集めるためのお問い合わせフォームを作成します。

Select your form type

次に、フォーム名と説明を入力する必要があります。

完了したら、「作成」ボタンをクリックするだけです。

Enter form name and description

フォームビルダーを使ってフォームをカスタマイズできるようになりました。

Formidableはドラッグアンドドロップで簡単にフォームを作成できます。左側のオプションからフォームに追加したいフォームフィールドを選択し、フォームテンプレートに配置するだけです。

Build your form

カスタマイザー後、あなたのサイトの任意の場所にフォームを埋め込んでください。

プラグインにはフォームを追加するための複数のオプションがあります。最も簡単な方法は、フォームビルダー上部の ‘埋め込み’ ボタンをクリックし、既存のページを選択するか、新規ページを作成してフォームを追加することです。

Embed your form in a new page

また、Formidable FormsブロックやWordPressコンテンツエディターのショートコードブロックを使ってフォームを埋め込むこともできます。

次に、ページに名前を付けてプレビューすることができます。

外観に満足したら、ページを公開してください。

Preview and publish your form

フォームが公開され、エントリーが集まり始めたら、Formidable Forms の Visual Views アドオンをインストールして有効化する必要があります。

WordPressダッシュボードからFormidable ” Add-Onsにアクセスします。次に、「Visual Views」アドオンまでスクロールダウンし、「インストール」ボタンをクリックします。

Install visual views addon

アドオンを有効化したら、WordPressダッシュボードからFormidable ” 表示に移動できます。

その後、上部の「+新規追加」ボタンをクリックするだけです。

Add a new view

次に、表示タイプを選択するポップアップウィンドウが表示されます。プラグインには、グリッド、テーブル、カレンダー、クラシック表示があります。

このチュートリアルでは、フォームのエントリーを表示するために「グリッド」表示を使用します。

Select a view type

その後、表示用のデータソースを選択する必要があります。

フォームからのエントリーを使用する」ドロップダウンメニューをクリックして、フォームを選択してください。表示名を入力する設定もあります。

データソースを選択したら、「表示作成」ボタンをクリックします。

Select data source

これで Formidable Forms のビュービルダーが起動します。

まずは「レイアウト・ビルダー」ボタンをクリックしてください。

Select a layout builder

次に、フォーム・エントリーを表示するレイアウトを選択する必要があります。

上部にある設定オプションからレイアウトを選択するだけです。フォームのエントリーを表示するために複数のレイアウトを追加することができます。

Build your layout

レイアウトを選択したら、「レイアウトを保存」ボタンをクリックします。

次に、「+」ボタンをクリックして表示ビルダーにコンテンツを追加することができます。フォームエントリーのレイアウトをカスタマイズしたり、フォームエントリーの前後にコンテンツを追加するオプションがあります。

このプラグインは、左側のグリッドスタイル設定パネルで、タイポグラフィ、背景色、枠線などを変更するオプションも提供している。

また、表示名フィールドの下にショートコードが表示されますが、これはサイト上でフォームエントリーを表示する際に必要になります。

Add content to the view

グリッド・スタイル設定パネルには、さらに高度な設定があります。高度な設定では、エントリー数やページサイズなどを制限することができます。

表示のカスタマイザーが完了したら、上部にある「更新」ボタンを忘れずにクリックしてください。

次に、WordPressサイトにフォームエントリーを表示する必要があります。そのためには、表示名の下にあるショートコードをコピーしてください。

ショートコードは次のようになる:

[display-frm-data id=2410]

その後、フォームエントリーを表示したい投稿やページに移動します。コンテンツエディターに入ったら、’ショートコード’ブロックを追加するだけです。

Select shortcode block

先ほどコピーしたショートコードをショートコード・ブロックに入力する。

その後、ページをプレビューして公開することができます。

Enter the shortcode

これで、あなたのサイトにアクセスして、フォーム入力の動作を確認することができます。

デモサイトではこんな感じです:

Form entries preview

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 カラムを見ればわかります。

Find WPForms form ID

ショートコードを追加するには、新規ページを作成するか、既存のページを編集するだけです。

次に、「ショートコード」ブロックを追加する。

Select shortcode block

ブロックを追加したら、ショートコードを入力するだけです。

WordPressページをプレビューし、上部にある「公開する」ボタンをクリックします。

Enter shortcode to show form entries

フロントエンドでのフォーム入力のプレビューはこんな感じです:

Display WPForms Entries on Front End

必要に応じて、カスタム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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. 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!

  2. 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!

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。