送信する前にフォームエントリをプレビューする方法

訪問者がフォームエントリを送信する前にプレビューしてもらいたいですか？

ユーザーがエントリをプレビューできるようにすることで、フォームに入力する際のエラーや不正確さの可能性を大幅に減らすことができます。

WPFormsには、フォームに簡単に追加できるエントリプレビューフィールドがあるため、ユーザーは送信中および送信後にエントリの概要をすばやく確認できます。

この投稿では、エントリプレビューフィールドを追加し、WPFormsでさまざまな方法でカスタマイズする方法を紹介します。

今すぐエントリープレビュー付きのフォームを作成する

なぜエントリープレビューを表示する必要があるのですか？

エントリをプレビューする機能は、特に長くて複雑なフォームの場合に非常に便利です。

フォームへの入力中にタイプミスや間違いを犯すのは通常のことですが、送信前のプレビューでは、送信ボタンを押す前に情報の正確性を確認できます。

したがって、エラーを最小限に抑え、送信前にユーザーが間違いを修正できるようにする場合は、WPFormsが提供するエントリプレビューフィールドを追加する必要があります。

送信する前にフォームエントリをプレビューする方法

フォームに送信プレビューを追加する方法については、ステップバイステップのチュートリアルをご覧ください。

1. WPFormsをインストールする
2. 新しいフォームを追加する
3. フォーム入力プレビューフィールドの追加
4. プレビューの通知とスタイルをカスタマイズする
5. エントリプレビュー確認の追加

さぁ、始めよう。

1.WPFormsをインストールします

まず、適切なWPFormsプランを選択し、アカウントを登録します。 次に、WPFormsアカウント領域にログインし、[ダウンロード]タブをクリックします。 これにより、[ WPFormsのダウンロード]ボタンを押してzipファイルをダウンロードできるページが開きます。

このページを表示している間は、必ずライセンスキーをコピーしてください。 これは、後でWordPressサイトでWPFormsProをアクティブ化するときに必要になります。

zipファイルがコンピューターにダウンロードされたら、WordPress管理ダッシュボードを開き、[プラグイン] »[新規追加]をクリックします。 次に、[プラグインのアップロード]ボタンをクリックします。

次に、[ファイルの選択]ボタンをクリックして、ダウンロードしたプラグインファイルを選択します。

ファイルがアップロードされたら、 [今すぐインストール]をクリックします。

WPFormsがWordPressサイトにインストールされます。 これには数秒しかかかりません。 インストールが完了したら、プラグインのアクティブ化ボタンを押します。

次に、 WPForms »設定をクリックします。 これにより、デフォルトで[一般設定]タブが開きます。 下にスクロールして[ライセンスキー]フィールドを見つけ、ここにキーを入力します（前にコピーしたもの）。

次に、[キーの確認]ボタンをクリックします。 これで、サイトへのWPFormsProのインストールが完了します。

2.新しいフォームを追加します

次に、サイトのWordPress管理エリアを開き、左側のサイドバーで[ WPForms]» [AddNew]をクリックします。 フォームに名前を付けて、後で簡単に見つけられるようにすることができます。

下にスクロールしてテンプレートを選択し、フォームの作成を開始します。 すべてのWPFormsフィールドと同様に、エントリプレビューフィールドは、利用可能な300以上のテンプレートのほとんどでサポートされています。

テンプレートを選択したら、次のステップで[エントリプレビュー]フィールドを追加します。

3.フォーム入力プレビューフィールドを追加します

次の例では、カスタムの予約フォームを使用していますが、任意のフォームテンプレートを自由に使用できます。

フォームにプレビュー機能を追加するには、[エントリプレビュー]フィールドをビルダーの左側のペインから、実際のフォームフィールドがある右側のペインにドラッグアンドドロップします。

フォームに[エントリプレビュー]フィールドを追加すると、プレビューが表示される新しいページが自動的に追加されます。

これは、ユーザーがフォームに入力しているときにプレビューが実際に表示される方法です。

フォーム内に[エントリプレビュー]フィールドを複数回配置することもできます。 たとえば、複数ページのフォームがある場合は、すべてのページの後にエントリプレビューフィールドを配置できます。 これは、ユーザーがフォームの残りの部分に入力し続けるときに、前のページに入力した情報をプレビューできることを意味します。

長いフォーム全体に複数のエントリプレビューフィールドを追加することは、ユーザーがエントリをプレビューし、必要に応じていつでも戻って変更を加えることができるようにするための優れた方法です。

4.プレビューの通知とスタイルをカスタマイズします

WPFormsを使用すると、プレビュー通知をカスタマイズできます。 フォームビルダービューの[エントリプレビュー]フィールドをクリックするだけで、フィールド設定が開きます。

[プレビュー通知の表示]トグルボタンを使用して、エントリプレビューの上にメッセージを表示したり、メッセージを完全に非表示にしたりできます。

また、プレビュー通知を好みに合わせて編集したり、デフォルトのメッセージをそのままにしておくこともできます。

次に、エントリプレビュースタイルを変更することをお勧めします。 [エントリプレビュー]フィールドオプションの[詳細設定]タブをクリックして、4つの異なるプレビュースタイルから選択します。

• 基本
• コンパクト
• テーブル
• テーブル、コンパクト

デフォルトのスタイルはBasicで、フォームエントリの行ごとのプレビューを表示します。

プレビューをよりタイトに見せたい場合は、コンパクトスタイルオプションを使用できます。

これで、フォーム内のエントリプレビューフィールドの設定が完了しました。 ただし、次の手順で示すように、追加できる別のタイプのエントリプレビューがあります。

5.エントリプレビュー確認を追加します

フォームに入力するときに表示されるエントリプレビュー以外に、WPFormsでは、ユーザーがフォームを送信した後にプレビューを表示することもできます。

[エントリのプレビュー]フィールドとは異なり、プレビューの確認が表示されたときに、ユーザーはエントリを変更できません。 代わりに、変更できない提出物のコピーのみがユーザーに表示されます。

エントリプレビューの確認を設定するには、WPFormsフォームビルダーの[設定]»[確認]に移動します。 ここで、確認メッセージボタンの後に[エントリプレビューを表示]をオンに切り替えることができます。

このオプションを有効にすると、ドロップダウンが表示され、エントリプレビューフィールドで上に示したようにプレビュースタイルを選択できます。

プレビュー確認（エントリが送信された後にのみ表示される）とともに、エントリプレビュー（フォームへの入力時に表示される）を引き続き使用できます。 または、これらのオプションのいずれか一方のみを使用できます。 それはすべてあなたの好みとあなたがあなたのフォームで何を達成しようとしているのかに依存します。

以上です！ これで、ユーザーがフォームエントリを送信する前にプレビューできるようになりました。

次に、WordPressフォームにアクセス制限を適用します

WordPressフォームをログインユーザーのみに制限しますか？ WPFormsを使用すると、ログイン状態によってユーザー権限レベルを選択できます。 詳細については、WordPressフォームをログインユーザーに制限する方法に関する記事を参照してください。

また、サイトでの販売や特別オファーを宣伝するための最高のWordPress通知バープラグインに関するガイドを読むこともできます。

フォームを作成する準備はできましたか？ 最も簡単なWordPressフォームビルダープラグインを今すぐ始めましょう。 WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証があります。

今すぐエントリープレビュー付きのフォームを作成する

この記事が役に立った場合は、FacebookとTwitterでフォローして、無料のWordPressチュートリアルとガイドを入手してください。