WordPressで確認画面付きフォームを無料で作成する方法【JetFormBuilder活用術】

日本のWebサイトでは当たり前のように見かける「お問い合わせ内容の確認画面」。ユーザーが送信前に入力内容を再確認できるこの機能は、入力ミスを防ぎ、安心感を与える上で非常に重要です。

しかし、WordPressでこの確認画面を実装しようとすると、意外と手こずることがあります。多くのフォームプラグインでは有料版の機能だったり、設定が複雑だったりするためです。

そこでこの記事では、無料のWordPressプラグイン「JetFormBuilder」を使って、誰でも簡単にお問い合わせ確認画面を実装する手順を、初心者にも分かりやすく解説します。

なぜ確認画面が必要なのか？

• 入力ミスの防止: ユーザー自身が間違いに気づく機会を提供します。
• 安心感の向上: 「いきなり送信されるのではないか」というユーザーの不安を取り除きます。
• コンバージョン率の改善: ユーザー体験が向上することで、フォームからの離脱を防ぐ効果が期待できます。

準備するもの：2つの無料プラグイン

今回は、Crocoblock社が開発した2つの無料プラグインを使用します。

1. JetFormBuilder: フォームを作成するためのメインプラグインです。ドラッグ＆ドロップで直感的に操作できます。
2. JetStyleManager for Gutenberg: 作成したフォームのデザインを調整するためのプラグインです。必須ではありませんが、デザインにこだわりたい方には推奨します。

まずは、WordPressの管理画面から プラグイン > 新規追加 へ進み、上記の2つのプラグインを検索してインストールし、有効化しておきましょう。

【ステップ1】フォームの基本項目を作成する

プラグインの準備ができたら、早速フォームを作成していきましょう。

1. 管理画面のメニューから JetFormBuilder > Add New をクリックします。
2. フォームのタイトルを入力します（例：「お問い合わせフォーム」）。
3. まずは、お問い合わせに必要なフィールドを配置していきます。
   • お名前（Text Field, 必須）
   • メールアドレス（Text Field, 必須）
   • 会社名（Text Field）
   • 電話番号（Text Field）
   • どうやってこのサイトを見つけましたか？（Checkbox Field, 必須）
   • 質問内容（Textarea Field, 必須）

【重要ポイント】
各フィールドをクリックすると、右側の設定パネルに「Form field name」という項目が表示されます。これは後で入力内容を呼び出すための「鍵（ID）」になります。後で分かりやすいように、それぞれ「name」「email」「company」といった半角英数字の名前に変更しておきましょう。

【ステップ2】魔法のブロックで「確認画面」を作り出す

ここからが、このチュートリアルの核心部分です。JetFormBuilderの「ステップフォーム（複数ページフォーム）」機能を応用して、確認画面を実装します。

1. 作成したフォームフィールドの一番下に、新しいブロックを追加します。
2. ブロック検索で「Form Page Break」と入力し、表示されたブロックを追加します。
3. ボタンが表示されるので、ボタンのテキストを「お問い合わせ内容を確認」などに変更します。
4. 右側の設定パネルで、「Validation message」という項目に、必須項目が未入力だった場合のエラーメッセージを入力しておきます（例：「必須項目を全て入力してください」）。

これだけで、フォームが入力画面と確認画面の2ページに分割されました。

【ステップ3】確認画面に入力内容を表示させる

次に、「Form Page Break」ブロックの下に、確認画面に表示する内容を作っていきます。

1. 見出しブロックを追加し、「お問い合わせ内容」と入力します。
2. 段落ブロックなどを追加し、右側のメニューから「HTMLとして編集」モードに切り替えます。
3. ここに、マクロと呼ばれる特殊なコードを使って、ユーザーが入力した内容を動的に表示させます。

マクロの書式:
<!--JFB_FIELD::field_name-->

field_name の部分に、ステップ1で設定した各フィールドの「Form field name」を記述します。

記述例：

<p>お名前： <!--JFB_FIELD::name--></p>
<p>メールアドレス： <!--JFB_FIELD::email--></p>
<p>会社名： <!--JFB_FIELD::company--></p>
<p>電話番号： <!--JFB_FIELD::phone--></p>
<p>どうやってこのサイトを見つけましたか： <!--JFB_FIELD::how_did_you_find--></p>
<p>質問内容： <!--JFB_FIELD::question--></p>

戻るボタンと送信ボタンを配置する

最後に、確認画面用のボタンを配置します。

1. カラムブロックを追加して、ボタンを横並びに配置できるようにします。
2. 戻るボタン:
   • 「Action Button」ブロックを追加します。
   • ボタンのテキストを「戻る」に変更します。
   • 右側設定パネルの Button Action Type で「Go to Prev Page」を選択します。
3. 送信ボタン:
   • もともとフォームの一番下にあった「送信」ボタンを、このカラムにドラッグ＆ドロップで移動させます。

これで、確認画面付きフォームの完成です！

【ステップ4】ページにフォームを設置する

最後に、作成したフォームを固定ページに設置します。

1. 「お問い合わせページ」などの固定ページを新規作成します。
2. ブロック検索で「JetForm」と入力し、ブロックを追加します。
3. プルダウンメニューから、先ほど作成した「お問い合わせフォーム」を選択します。
4. ページを公開し、実際にフォームが意図した通りに動作するか確認しましょう。

まとめ

いかがでしたか？ JetFormBuilderの「Form Page Break」機能と「マクロ」を組み合わせることで、これまで難しかった確認画面付きフォームが、驚くほど簡単に、しかも無料で実装できました。

この機能を活用すれば、ユーザーにとってより親切で信頼性の高いウェブサイトを構築できます。ぜひ、あなたのサイトにも導入してみてください。