### [エントリープレビューを有効にする](https://wpforms.com/docs/how-to-show-entry-previews-in-wpforms/) **公開日:** 2023年11月24日 **著者:** Umair Majeed **抜粋:** ユーザーにフォーム送信の前後に回答を表示する方法を学びましょう。 **コンテンツ:** ユーザーにフォーム送信の前後に回答のプレビューを表示させたいですか？エントリープレビューフィールドを使用すると、サイト上の任意のフォームに簡単にプレビューページを追加できます。さらに、フォーム確認設定では、確認画面にエントリープレビューを表示することもできます。 このガイドでは、WPFormsのエントリープレビューフィールドと確認設定の使用方法を説明します。 このフォームを完了するには、ブラウザでJavaScriptを有効にしてください。 - ステップ 1/2 ### フォームデモをお試しください！ 名前 \*姓 名 メールアドレス コメントまたはメッセージ 次へ プレビューを更新中… **これは送信内容のプレビューです。まだ送信されていません！** しばらく時間を取って、情報を確認してください。戻って変更することもできます。 前へ 送信 --- 以下のチュートリアルに進む前に、WPFormsがWordPressサイトに[インストールされ、有効化されている](https://wpforms.com/docs/install-wpforms-plugin/)ことを確認してください。その後、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/)するか、既存のフォームを編集してフォームビルダーを開き、エントリープレビューフィールドにアクセスできます。 ### フォームにエントリープレビューフィールドを追加する まず、フォームにエントリープレビューフィールドを追加する必要があります。このフィールドは有料ライセンスでのみ利用可能なので、フォームビルダーの**Fancy Fields**の下にあります。  **Entry Preview**をクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加します。 フォームにエントリープレビューフィールドを追加すると、ページ区切りフィールドも自動的に追加され、フォームが複数のページに分割されます。  **注:** WPFormsのページ区切りで利用可能なオプションの詳細については、[マルチページフォーム](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/#Customizing_Form_Page_Settings)に関するチュートリアルをご覧ください。 エントリープレビューフィールドはマルチページフォームで機能する必要があり、エントリープレビューフィールドを最初に削除しない限り、フォームに追加されたページ区切りフィールドを削除することはできません。 ほとんどの場合、ユーザーがすべてのフィールドに入力した後でのみプレビューが表示されるように、エントリープレビューをフォームの最後に配置することをお勧めします。 **注:** エントリープレビューフィールドの後にフォームにフィールドを追加することはできますが、前のページのデータのみが表示されます。 たとえば、3ページフォームの2ページ目にエントリープレビューフィールドを配置した場合、フォームの最初のページにあるフィールドからのユーザーの入力と選択のみが表示されます。 ### エントリープレビューフィールドのカスタマイズ 次に、フォームビルダーのプレビューエリアにあるエントリープレビューフィールドをクリックして、フィールドオプションを開きます。 ここで、**Display Preview Notice**トグルを使用して、エントリープレビューの前に追加メッセージを表示または非表示にすることができます。  このフォームがサイトに公開されたときに表示される通知をカスタマイズすることもできます。  このフィールドは、テキストとHTMLタグを受け入れます。 ### エントリープレビューのスタイルの選択 **Advanced**フィールドオプションタブでは、フォームのエントリープレビューに4つの異なるスタイル（Basic、Compact、Table、Table, Compact）から選択できます。  これらのオプションはすべて同じ情報を表示しますが、レイアウトが異なります。 #### Basicエントリープレビューのスタイル Basicエントリープレビューのスタイルは、フィールドラベルのリストに続いてユーザーの入力または選択が表示されるシンプルなリストです。このスタイルがフロントエンドに表示される例を次に示します。  #### Compactエントリープレビューのスタイル CompactスタイルはBasicスタイルと同様にテキストを使用しますが、フィールドラベルとユーザーの入力を別々の列に配置して、ページ上のスペースを節約します。  **注:** フォームを短縮する他の方法について知りたいですか？[マルチカラムレイアウト](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/)に関するチュートリアルをご覧ください。 #### Tableエントリープレビューのスタイル Tableスタイルは、フィールドラベルとユーザーの入力を区別するために行が色付けされたテーブルにエントリーを表示します。  #### Table, Compactエントリープレビューのスタイル 最後に、Table, Compactスタイルは、フィールドラベルとユーザーの入力用の別々の列を持つテーブルにエントリーを配置します。  ### エントリープレビューフィールドにカスタムCSSを追加する **CSS Classes**フィールドの高度なフィールドオプションにカスタムCSSクラスを追加することもできます。  **注:** WPFormsでカスタムCSSクラスを使用することについてさらに知りたいですか？詳細については、[フォームにカスタムCSSを追加する方法](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/)のガイドをご覧ください。 ### エントリープレビュー確認の設定 エントリープレビューフィールドの代わりに、またはそれに加えて、エントリープレビュー確認を使用できます。 エントリープレビューフィールドを使用すると、ユーザーは戻って入力や選択を変更できます。これは、フォームを送信する前に訪問者にエントリーの誤りを訂正させたい場合に役立ちます。 ただし、ユーザーに入力や選択を変更するオプションを与えずに、エントリーをプレビューさせたい状況もあります。このような場合は、代わりにエントリープレビュー確認を使用できます。 これを行うには、フォームビルダーの**Settings » Confirmations**に移動します。作成した確認のいずれかについて、**Show entry preview after confirmation message**オプションをオンにすることができます。  **注:** フォーム確認の設定に役立ちますか？[WPForms確認設定](https://wpforms.com/docs/setup-form-confirmation-wpforms/)と[条件付きフォーム確認の作成](https://wpforms.com/docs/how-to-create-conditional-form-confirmations/)に関するチュートリアルにすべての詳細があります。 この設定がオンになると、ドロップダウンが表示され、この確認に使用したい[エントリープレビューのスタイル](#style)を選択できます。  フォームビルダーを終了する前に、必ず変更を保存してください。フロントエンドでは、エントリープレビュー確認は次のようなものになる場合があります。  これで完了です！これで、ユーザーはフォームを送信する前後にエントリーをプレビューできるようになります。 次に、ユーザーのエントリーを管理する方法について知りたいですか？詳細については、[WPFormsのエントリーに関する完全ガイド](https://wpforms.com/docs/complete-guide-to-form-entries/)をご覧ください。 **カテゴリー:** フォーム作成、フィールド ---