AI要約
訪問者に送信前にフォームの入力内容を確認してもらいたいですか？
ユーザーが入力内容を確認できるようにすると、フォームの入力中にエラーや不正確さが発生する可能性が大幅に減少します。
WPFormsにはエントリープレビューフィールドがあり、フォームに簡単に追加できるため、ユーザーは送信中および送信後に、入力内容の簡単な概要を確認できます。
この記事では、WPFormsでエントリープレビューフィールドを追加し、さまざまな方法でカスタマイズする方法を説明します。
送信前にフォームエントリをプレビューする方法
ステップバイステップのチュートリアルで、フォームに送信プレビューを追加する方法を学びましょう。
この記事の内容
始めましょう。
1. WPFormsをインストールする
まず、適切なWPFormsプランを選択し、アカウントを登録します。次に、WPFormsアカウントエリアにログインし、[ダウンロード]タブをクリックします。これにより、WPFormsのzipファイルをダウンロードできるページが開きます。
このページで、ライセンスキーをコピーしておいてください。これは後でWordPressサイトでWPForms Proを有効化する際に必要になります。
zipファイルがコンピューターにダウンロードされたら、WordPress管理ダッシュボードを開き、[プラグイン] » [新規追加]をクリックします。次に、[プラグインをアップロード]ボタンをクリックします。
次に、[ファイルを選択]ボタンをクリックし、ダウンロードしたばかりのプラグインファイルを選択します。
ファイルがアップロードされたら、[今すぐインストール]をクリックします。
WPFormsがWordPressサイトにインストールされます。これには数秒しかかかりません。インストールが完了したら、[プラグインを有効化]ボタンを押します。
次に、[WPForms] » [設定]をクリックします。デフォルトで一般設定タブが開きます。下にスクロールしてライセンスキーフィールドを見つけ、ここにキー（以前にコピーしたもの）を入力します。
次に、[キーを確認]ボタンをクリックします。これにより、サイトでのWPForms Proのインストールが完了します。
2. 新規フォームを作成する
次に、サイトのWordPress管理エリアを開き、左側のサイドバーにある[WPForms] » [新規追加]をクリックします。後で見つけやすいように、フォームに名前を付けることができます。
下にスクロールして、フォームの構築を開始するためのテンプレートを選択します。すべてのWPFormsフィールドと同様に、エントリープレビューフィールドは、利用可能な2,100以上のフォームテンプレートのほとんどでサポートされています。
テンプレートを選択したら、次のステップでエントリープレビューフィールドを追加します。
3. フォームエントリープレビューフィールドを追加する
次の例では、カスタム予約フォームを使用していますが、お好みのフォームテンプレートを自由に選択できます。
フォームにプレビュー機能を追加するには、ビルダーの左側ペインから[エントリープレビュー]フィールドを、実際のフォームフィールドがある右側ペインにドラッグアンドドロップするだけです。
エントリープレビューフィールドをフォームに追加すると、プレビューが表示される新しいページが自動的に追加されます。
フォーム入力中にユーザーがプレビューをどのように表示するかを示します。
フォーム内にエントリープレビューフィールドを複数配置することもできます。たとえば、複数ページフォームがある場合、各ページの後にエントリープレビューフィールドを配置できます。これにより、ユーザーはフォームの残りの部分に入力し続ける際に、前のページで入力した情報をプレビューできます。
長いフォーム全体に複数のエントリープレビューフィールドを追加することは、ユーザーがエントリーをプレビューし、必要に応じていつでも戻って変更できることを保証するための優れた方法です。
4. プレビュー通知とスタイルをカスタマイズする
WPFormsでは、プレビュー通知をカスタマイズできます。フォームビルダービューでエントリープレビューフィールドをクリックするだけで、フィールド設定を開くことができます。
表示プレビュー通知トグルボタンを使用して、エントリープレビューの上にメッセージを表示したり、完全に非表示にしたりできます。
また、プレビュー通知をお好みに合わせて編集したり、デフォルトのメッセージのままにしたりすることもできます。
次に、エントリープレビューのスタイルを変更したい場合があります。エントリープレビューフィールドオプションの詳細タブをクリックして、4つの異なるプレビュースタイルから選択します。
- ベーシック
- コンパクト
- テーブル
- テーブル、コンパクト
デフォルトのスタイルは基本で、フォームエントリーの行ごとのプレビューを表示します。
プレビューをよりタイトに見せたい場合は、コンパクトスタイルオプションを選択できます。
これで、フォーム内のエントリープレビューフィールドの設定は完了です。ただし、次のステップで示すように、追加できる別の種類のエントリープレビューがあります。
5. エントリープレビュー確認を追加する
フォーム入力中に表示されるエントリープレビューとは別に、WPFormsではユーザーがフォームを送信した後にプレビューを表示することもできます。
エントリープレビューフィールドとは異なり、プレビュー確認が表示されたときにユーザーはエントリーを変更できません。代わりに、変更できなくなった提出物のコピーがユーザーに表示されるだけです。
エントリープレビュー確認を設定するには、WPFormsフォームビルダーの設定 » 確認に移動します。ここで、確認メッセージの後にエントリープレビューを表示ボタンをオンにすることができます。
このオプションを有効にすると、エントリープレビューフィールドで示したように、プレビューのスタイルを選択できるドロップダウンが表示されます。
エントリープレビュー（フォーム入力中に表示される）とプレビュー確認（エントリーが送信された後にのみ表示される）を併用することもできます。または、これらのオプションのいずれか一方のみを使用することもできます。すべては、あなたの好みとフォームで達成しようとしていることに依存します。
これで完了です！ユーザーは、フォームエントリーを送信する前にプレビューできるようになりました。
エントリープレビューを表示する理由
エントリーをプレビューできる機能は、特に長くて複雑なフォームの場合に非常に役立ちます。
フォームに入力中にタイプミスや間違いをすることは普通ですが、送信前のプレビューにより、送信ボタンを押す前に情報の正確性を確認できます。
したがって、エラーを最小限に抑え、ユーザーが送信前に間違いを修正できるようにするには、WPFormsが提供するエントリープレビューフィールドを含める必要があります。
次に、WordPressフォームのアクセス制限を強制する
WordPressフォームをログインユーザーのみに制限したいですか？WPFormsでは、ログイン状態によってユーザーの権限レベルを選択できます。詳細については、WordPressフォームをログインユーザーに制限する方法に関する記事をご覧ください。
また、最高のWordPress通知バープラグインに関するガイドを読んで、サイトでのセールや特別オファーを宣伝することもできます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
情報は素晴らしいですが、フォーム全体の確認をどのように行うかが完全に明確ではありません。状況：マルチページフォームがあり、最後にフォーム全体を確認したいのです。各ページを個別に確認するのではなく。
Karinaさん、こんにちは。
エントリープレビューはマルチページでも問題なく機能するはずです。マルチページの場合、フォームの最後にエントリープレビューを独自のページに配置することをお勧めします。これにより、ユーザーは他のフィールドすべてに入力した後でなければプレビューを見ることができません。この方法で、フォーム全体のプレビューを表示できます。
参考までに、同じ内容に関する当社の優れた記事はこちらです。
お役に立てば幸いです！
プレビューでフィールドの説明も表示できますか？現時点では表示できますが、ありがとうございます。
Claudioさん、こんにちは。
現在、送信前のエントリープレビューにフィールドの説明を表示するネイティブ機能はありません。この機能を将来的に検討するよう、あなたの投票を追加しました。
ありがとうございます！
Stripeのマルチアイテムラジオボタンを使用しています。この中で、請求される金額のプレビュー表示を停止する方法はありますか？
例：ラジオボタンのテキストに金額が含まれています。二重に表示されると混乱します。
Sharonさん、こんにちは。現在、フォームプレビューで価格を無効/非表示にする機能はありません。これは便利な機能だと思いますので、開発者の皆様の目に留まるように、機能リクエストトラッカーに追加します。