AI要約
フォームの送信前または送信後に、ユーザーにエントリーのプレビューを表示したいですか？エントリープレビューフィールドを使用すると、サイト上のあらゆるフォームにプレビューページを簡単に追加できます。さらに、フォーム確認設定により、確認画面にもエントリープレビューを表示できます。
このガイドでは、WPFormsのエントリープレビューフィールドと確認設定の使用方法を説明します。
この記事の内容
以下のチュートリアルに進む前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認してください。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーを開き、エントリープレビューフィールドにアクセスできます。
フォームにエントリープレビューフィールドを追加する
まず、フォームにエントリープレビューフィールドを追加する必要があります。このフィールドは有料ライセンスでのみ利用可能なので、フォームビルダーのFancy Fieldsの下にあります。
Entry Previewをクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加します。
フォームにエントリープレビューフィールドを追加すると、ページ分割フィールドも自動的に追加され、フォームが複数のページに分割されます。
注意：WPFormsのページ分割で利用可能なオプションの詳細については、マルチページフォームに関するチュートリアルを参照してください。
エントリープレビューフィールドは機能するためにマルチページフォームを必要とし、エントリープレビューフィールドを最初に削除しない限り、フォームに追加されたページ分割フィールドを削除することはできません。
ほとんどの場合、ユーザーがすべてのフィールドに入力した後でのみプレビューが表示されるように、エントリープレビューをフォームの最後に配置することをお勧めします。
注意：エントリープレビューフィールドの後にフォームにフィールドを追加することはできますが、フォームの前のページからのデータのみが表示されます。
たとえば、3ページフォームの2ページ目にエントリープレビューフィールドを配置した場合、最初のページからのユーザーの入力と選択のみが表示されます。
エントリープレビューフィールドのカスタマイズ
次に、フォームビルダーのプレビューエリアにあるエントリープレビューフィールドをクリックして、フィールドオプションを開きます。
ここで、Display Preview Noticeトグルを使用して、エントリープレビューの前に追加メッセージを表示または非表示にできます。
このフォームがサイトに公開されたときに表示されるエントリープレビューの上に表示される通知をカスタマイズすることもできます。
このフィールドは、テキストとHTMLタグの両方を受け入れます。
エントリープレビューのスタイルの選択
Advancedフィールドオプションタブでは、フォームのエントリープレビューの4つの異なるスタイル（Basic、Compact、Table、Table, Compact）から選択できます。
これらのオプションはすべて同じ情報を表示しますが、レイアウトが異なります。
ベーシックエントリープレビューのスタイル
基本入力プレビューのスタイルは、フィールドラベルの後にユーザーの入力または選択項目が続くシンプルなリストです。このスタイルがフロントエンドにどのように表示されるかの例を以下に示します。
コンパクト入力プレビュー スタイル
コンパクト スタイルは、基本スタイルと同様にテキストを使用しますが、フィールドラベルとユーザーの入力を別々の列に配置して、ページ上のスペースを少なくします。
注意: フォームをさらに簡潔にする方法について知りたいですか？複数列レイアウトのチュートリアルをご覧ください。
テーブル入力プレビュー スタイル
テーブル スタイルは、フィールドラベルとユーザーの入力を区別するために行が色付けされたテーブルに入力値を表示します。
テーブル、コンパクト入力プレビュー スタイル
そして最後に、テーブル、コンパクト スタイルは、フィールドラベルとユーザーの入力に別々の列があるテーブルに入力値を配置します。
エントリープレビューフィールドにカスタムCSSを追加する
高度なフィールドオプションのCSS クラスフィールドにカスタム CSS クラスを追加することもできます。
注意: WPForms でカスタム CSS クラスを使用する方法についてさらに知りたいですか？詳細については、フォームにカスタム CSS を追加するガイドをご覧ください。
エントリープレビュー確認の設定
入力プレビュー確認を、入力プレビューフィールドの代わりに使用することも、追加することもできます。
入力プレビューフィールドを使用すると、ユーザーは戻って入力または選択を変更できます。これは、訪問者がフォームを送信する前に、入力内容の誤りを修正できるようにしたい場合に役立ちます。
ただし、ユーザーに入力または選択を変更するオプションを与えずに、入力内容をプレビューできるようにしたい状況もあります。このような場合は、代わりに確認メッセージで入力プレビューを使用できます。
これを行うには、フォームビルダーで設定 » 確認に移動します。作成した確認メッセージのいずれかについて、確認メッセージの後にプレビューを表示オプションをオンにすることができます。
注意: フォームの確認メッセージの設定方法についてサポートが必要ですか？WPForms 確認メッセージ設定および条件付きフォーム確認メッセージの作成に関するチュートリアルで詳細をご確認ください。
この設定がオンになると、この確認メッセージに使用したい入力プレビュー スタイルを選択できるドロップダウンが表示されます。
フォームビルダーを終了する前に、必ず変更を保存してください。フロントエンドでは、入力プレビュー確認メッセージは次のようなものになる可能性があります。
これで完了です！これで、ユーザーはフォームを送信する前または後に、入力内容をプレビューできるようになります。
次に、ユーザーの入力内容を管理する方法について知りたいですか？詳細については、WPForms の入力内容完全ガイドをご覧ください。