WordPressでお問い合わせフォームを作っていると、「送信する前に入力内容を確認できる画面を付けたい」と思うことがあります。
特に、企業サイトのお問い合わせフォームや、資料請求・見積もり・採用応募などのフォームでは、入力内容を送信前に確認できると安心ですよね。
Contact Form 7って、入力してそのまま送信するイメージだけど、確認画面は作れないの？
Contact Form 7には、入力内容を送信前に確認する「確認画面」は標準では用意されていません。ただし、対応プラグインを利用することで「入力 → 確認 → 送信」という流れを作れますよ。
そこでこの記事では、Contact Form 7で確認画面を作る方法について解説します。
確認画面を追加できるプラグインの選び方や、設定後に確認しておきたいポイント、サンクスページとの違いについても紹介します。
Contact Form 7に確認画面はある？
まず知っておきたいのが、Contact Form 7には送信前に入力内容を確認する機能が標準搭載されていないということです。
基本的には、フォームへ入力して送信すると、そのまま送信処理が行われます。
そのため、次のような流れにしたい場合は、別途確認画面を追加する必要があります。
入力 ↓ 確認 ↓ 送信 ↓ サンクスページ
「確認画面を付けたいなら、Contact Form 7自体を別のフォームプラグインに変えないといけない？」
そんなことはありません。Contact Form 7をそのまま使って、確認画面に対応したプラグインを追加する方法があります。
Contact Form 7を使い慣れている場合は、フォームを作り直さずに確認画面を追加できるので便利です。
Contact Form 7に確認画面を設置するメリット
確認画面を追加すると、ユーザーは送信前に入力内容をチェックできます。
特に入力項目が多いフォームでは、確認画面を設けるメリットが大きくなります。
入力ミスを防ぎやすい
名前やメールアドレス、電話番号などを送信前に確認できるため、入力ミスに気づきやすくなります。
例えばメールアドレスを間違えて入力したまま送信してしまうと、問い合わせを受け取った側から返信できなくなる可能性があります。
確認画面があれば、ユーザー自身が送信前に間違いをチェックできます。
送信前に入力内容を確認できる
お問い合わせ内容が長かったり、入力項目が多かったりする場合も、確認画面があると安心です。
入力項目が多いフォームだと、「これ、ちゃんと入力したっけ？」って不安になることあるよね。
そうなんです。確認画面があると、送信ボタンを押す前に一度内容を整理して確認できるので、ユーザーにとっても親切な設計になります。
「この内容で送信して大丈夫かな？」という不安を減らせるのも、確認画面を設置するメリットです。
企業サイトとの相性が良い
企業サイトでは、個人ブログなどの簡単なお問い合わせフォームよりも入力項目が多くなるケースがあります。
例えば、次のようなフォームです。
- 資料請求フォーム
- 見積もり依頼フォーム
- 採用応募フォーム
- 予約フォーム
- 法人向けお問い合わせフォーム
このようなフォームでは、送信前に入力内容を確認できるようにしておくと、より丁寧なお問い合わせ導線を作れます。
Contact Form 7の確認画面とサンクスページの違い
確認画面を作るときに混同しやすいのが、「確認画面」と「サンクスページ」です。
どちらもフォームに関連するページですが、役割はまったく違います。
| ページ | 表示されるタイミング | 目的 |
|---|---|---|
| 確認画面 | 送信前 | 入力内容を確認する |
| サンクスページ | 送信後 | 送信完了を伝える |
例えば、次のような流れになります。
お問い合わせフォーム ↓ 確認画面 ↓ 送信 ↓ サンクスページ
確認画面は「送信前」、サンクスページは「送信後」って覚えればいいんだね。
その通りです。確認画面は「この内容で送っていいですか？」、サンクスページは「お問い合わせを受け付けました」という役割ですね。
確認画面では入力内容を確認し、サンクスページでは送信が完了したことをユーザーに伝えます。
そのため、必要に応じて確認画面とサンクスページの両方を用意すると、分かりやすいフォームになります。
Contact Form 7のサンクスページについては、こちらの記事で詳しく解説しています。
→ Contact Form 7でサンクスページを作る方法｜リダイレクト設定・注意点まで解説
Contact Form 7で確認画面を作る方法
Contact Form 7に確認画面を追加する方法はいくつかありますが、手軽なのは確認画面に対応したプラグインを利用する方法です。
確認画面対応プラグインを利用する
WordPress.orgには、Contact Form 7の機能を拡張して確認画面を追加できるプラグインが公開されています。
プラグインを利用すれば、現在使用しているContact Form 7のフォームを大きく作り直すことなく、確認画面を追加できる場合があります。
ただし、確認画面用プラグインなら何でもいいというわけではありません。
導入前に、次のポイントを確認しておきましょう。
- 現在も更新されているか
- 使用しているWordPressのバージョンに対応しているか
- 使用しているContact Form 7のバージョンに対応しているか
- 複数のフォームで利用できるか
- 「戻る」ボタンが正常に動作するか
- スマートフォンでも正常に表示できるか
- 使用中のテーマや他のプラグインと競合しないか
確認画面を追加するだけなら、適当にプラグインを入れても大丈夫？
フォームはサイトの重要な機能なので、そこは慎重に。Contact Form 7本体がアップデートされることもあるので、確認画面プラグインとの互換性や更新状況は必ず確認しましょう。
特にお問い合わせフォームは、「送信できない」「メールが届かない」といったトラブルが直接問い合わせの取りこぼしにつながります。
本番サイトへ導入する前に、テスト環境などで動作確認しておくことをおすすめします。
確認画面を追加できるプラグインの例
ここでは、Contact Form 7に確認画面機能を追加できるプラグインの例を紹介します。
Norick Confirm for Contact Form 7
Norick Confirm for Contact Form 7は、Contact Form 7に確認画面を追加するためのプラグインです。
確認画面だけでなく、戻るボタンや複数フォームへの対応、確認画面に表示するメッセージの設定などにも対応しています。
Contact Form 7で「入力 → 確認 → 送信」という一般的なフォームの流れを作りたい場合に候補になります。
ただし、プラグインの動作はWordPressのバージョンやテーマ、他のプラグインとの組み合わせによって変わることがあります。
導入前には、現在の対応状況を確認しておきましょう。
Frontierline Forms
Frontierline Forms – Confirmation & Multi-Step for Contact Form 7は、確認画面だけでなく、マルチステップフォームや条件分岐、送信履歴などにも対応したContact Form 7用アドオンです。
単純な確認画面だけではなく、お問い合わせフォームをより多機能にしたい場合の候補になります。
ただし、機能が多い分、サイトによっては必要以上に複雑になる可能性もあります。
確認画面だけ欲しいなら、多機能なプラグインを選ばなくてもいいってこと？
そうですね。必要な機能が「確認画面」だけなら、できるだけシンプルなものを選ぶのも一つの考え方です。機能が増えるほど、設定や他のプラグインとの相性も確認する必要がありますからね。
自分のサイトに必要な機能だけを基準に選ぶようにしましょう。
確認画面を設置するときの基本的な流れ
確認画面対応プラグインを利用する場合、基本的には次のような流れになります。
- Contact Form 7をインストールする
- お問い合わせフォームを作成する
- 確認画面に対応したプラグインをインストールする
- 確認画面を有効にする
- 入力内容が確認画面に正しく表示されるか確認する
- 確認画面から正常に送信できるか確認する
- 送信後にサンクスページを表示する
ただし、具体的な設定方法はプラグインによって異なります。
使用するプラグインが決まったら、公式の設定方法やドキュメントを確認しながら設定しましょう。
確認画面に表示する項目
確認画面では、フォームに入力された内容をユーザーが確認できるようにします。
例えば、次のようなお問い合わせフォームがあるとします。
- お名前
- メールアドレス
- 電話番号
- 会社名
- お問い合わせ内容
確認画面では、次のように入力内容を一覧で表示します。
お名前：山田太郎 メールアドレス：yamada@example.com 電話番号：090-0000-0000 会社名：株式会社○○ お問い合わせ内容： ホームページ制作について相談したい
ユーザーが「この内容で送信して大丈夫」と確認してから送信できる状態にするのがポイントです。
確認画面には「戻る」ボタンも用意する
確認画面を作るなら、送信ボタンだけでなく「戻る」ボタンも用意することをおすすめします。
確認画面を見たあとに、入力内容を修正したくなるケースがあるからです。
例えば、
- 名前を間違えていた
- メールアドレスを修正したい
- 電話番号を変更したい
- お問い合わせ内容を書き直したい
といったケースです。
確認画面まで来てから間違いに気づいたら、戻って直したいよね。
そうなんです。だから「戻る」ボタンはかなり重要です。そしてもう一つ大事なのが、戻ったときに入力内容が消えないことです。
「戻る」ボタンを押したときに、入力済みの内容が保持されるかどうかも必ず確認しましょう。
確認画面をスマートフォンでも確認する
お問い合わせフォームは、パソコンだけでなくスマートフォンから利用されることも多くあります。
そのため、確認画面を作ったらスマートフォンでも必ず動作確認を行いましょう。
特に次のポイントをチェックします。
- 入力内容が画面内に収まっているか
- 長い文章が横にはみ出していないか
- ボタンが押しやすい大きさになっているか
- 戻るボタンと送信ボタンを間違えにくくなっているか
- 戻ったときに入力内容が消えていないか
- 確認画面から正常に送信できるか
パソコンでは問題なくても、スマートフォンではボタンの配置や長文の表示などで問題が起こることがあります。
確認画面を作ったら必ずテスト送信する
確認画面を追加したら、最後に必ず実際のフォームを使ってテスト送信を行いましょう。
「確認画面が表示されたからOK！」じゃダメなの？
フォームは最後の送信まで確認するのが大切です。確認画面は表示されても、その先でメールが届かない、サンクスページに移動しない、といった問題が起こることがあります。
最低でも、次の項目を一通り確認しておきましょう。
- 入力画面が正常に表示される
- 必須項目のバリデーションが動作する
- 確認画面に入力内容が正しく表示される
- 戻るボタンで入力画面へ戻れる
- 戻ったときに入力内容が保持されている
- 送信ボタンで正常に送信できる
- 管理者宛てメールが届く
- 自動返信メールが届く
- サンクスページが表示される
お問い合わせフォームは、設定ミスがそのまま「問い合わせが届かない」という重大な問題につながる可能性があります。
本番公開前には、実際のユーザーと同じ流れで最初から最後までテストしておきましょう。
確認画面と自動返信メールを組み合わせる
お問い合わせフォームをしっかり運用するなら、確認画面だけでなく自動返信メールも設定しておくと安心です。
例えば、次のような流れです。
お問い合わせフォーム ↓ 入力内容を確認 ↓ 送信 ↓ サンクスページ ↓ 自動返信メール ↓ 管理者へお問い合わせ通知
ユーザーにはサンクスページで送信完了を伝え、自動返信メールでは「お問い合わせを受け付けたこと」や「返信までの目安」などを案内できます。
確認画面・サンクスページ・自動返信メールって、全部必要なの？
必須というわけではありません。ただ、企業サイトなどの重要なお問い合わせフォームなら、それぞれ役割が違うので、組み合わせるとユーザーにも管理者にも分かりやすいですよ。
Contact Form 7の自動返信メールについては、こちらの記事でも詳しく解説しています。
→ Contact Form 7で自動返信メールを設定する方法｜メール（2）の使い方と届かないときの対処法
Contact Form 7の確認画面は必ず設置した方がいい？
ここは少し迷うところですが、すべてのお問い合わせフォームに確認画面が必要というわけではありません。
例えば、名前とメールアドレスだけを入力する簡単なフォームなら、確認画面がなくても大きな問題にならない場合があります。
一方で、次のようなフォームでは確認画面を設置するメリットが大きくなります。
- 入力項目が多い
- お問い合わせ内容が長い
- 見積もり依頼フォーム
- 資料請求フォーム
- 採用応募フォーム
- 予約フォーム
- 法人向けお問い合わせフォーム
じゃあ、確認画面を付ければ付けるほど親切ってこと？
必ずしもそうではありません。確認画面を追加すると、ユーザーの操作が1ステップ増えます。フォームが簡単なら、確認画面を省いたほうがスムーズな場合もあります。
確認画面を設置することで、必ずコンバージョン率が上がるわけではありません。
フォームの入力項目やユーザー層、問い合わせの重要度などを考えて、必要かどうか判断することが大切です。
Contact Form 7の確認画面でよくあるトラブル
確認画面に入力内容が表示されない
確認画面に入力内容が表示されない場合は、フォームの項目名や確認画面側で使用しているタグなどが正しく対応しているか確認しましょう。
Contact Form 7では、フォームで使用しているフォームタグと、メール設定などで使用するメールタグを対応させる必要があります。
例えば、フォーム側で次のように設定している場合、
[text your-name]
メール側では次のようなメールタグを使用します。
[your-name]
確認画面対応プラグインについても、フォーム項目の名前や設定によって表示方法が変わる場合があります。
入力内容が表示されない場合は、使用しているプラグインの仕様も確認してみましょう。
戻るボタンで入力内容が消える
確認画面から入力画面へ戻ったときに、入力した内容が消えてしまうことがあります。
原因としては、確認画面を実装するプラグインの仕様だけでなく、テーマやキャッシュ、JavaScriptなどが関係している場合もあります。
そのため、実際に入力してから「戻る」ボタンを押し、入力内容が保持されているか確認しましょう。
確認画面から送信できない
確認画面を追加したあとに送信できなくなった場合は、まずContact Form 7本体と確認画面プラグインの互換性を確認しましょう。
それでも原因が分からない場合は、JavaScriptエラーや他のプラグインとの競合も確認します。
JavaScriptのエラーって、どうやって確認するの？
Chromeなどのブラウザで開発者ツールを開いて、Consoleを確認するとエラーが出ていることがあります。フォーム送信時にエラーが発生していないかチェックしてみましょう。
JavaScriptエラーが出ている場合は、確認画面プラグインだけでなく、テーマや他のプラグインとの競合も疑ってみましょう。
Contact Form 7で確認画面を作るときの注意点
確認画面を追加するときは、単純にプラグインをインストールして終わりではありません。
フォーム全体が正常に動作するところまで確認することが重要です。
特に注意したいのが、Contact Form 7本体との互換性です。
Contact Form 7は継続的にアップデートされているため、確認画面用プラグインについても、現在のContact Form 7で正常に動作するか確認してから導入しましょう。
また、確認画面を追加することでJavaScriptなどの処理が増える場合もあります。
フォームの表示速度や送信処理に影響がないかも、実際のサイトで確認しておくと安心です。
Contact Form 7で確認画面を作る方法まとめ
Contact Form 7には、送信前に入力内容を確認する確認画面機能は標準では搭載されていません。
確認画面を追加したい場合は、Contact Form 7に対応したプラグインを利用する方法が一般的です。
確認画面を設置すると、ユーザーが送信前に入力内容を確認できるため、入力ミスの防止や安心感の向上につながります。
ただし、確認画面を追加するとユーザーの操作が1ステップ増えるため、すべてのフォームに必要というわけではありません。
結局、どんなフォームなら確認画面を付けたほうがいい？
入力項目が多いフォームや、見積もり・資料請求・採用応募など、送信内容が重要なフォームなら検討する価値があります。逆に、名前とメールアドレスだけの簡単なフォームなら、必ずしも必要ではありません。
特に次のようなフォームでは、確認画面を設置するメリットがあります。
- 入力項目が多いフォーム
- お問い合わせ内容が長いフォーム
- 見積もり依頼
- 資料請求
- 採用応募
- 予約
- 法人向けお問い合わせ
フォーム全体の導線としては、次のような構成が分かりやすいでしょう。
入力 ↓ 確認 ↓ 送信 ↓ サンクスページ ↓ 自動返信メール
Contact Form 7を使って本格的なお問い合わせフォームを作る場合は、確認画面だけでなく、自動返信メール・サンクスページ・スパム対策なども合わせて設定しておくと安心です。
確認画面を作ったら、それで終わりじゃなくて、最後までテストするのが大事なんだね。
そうです！「入力できる」「確認できる」だけではなく、「ちゃんと送信される」「メールが届く」「送信後のページが表示される」まで確認して、初めて完成です。
お問い合わせフォームは、サイトの中でも特に重要なコンバージョンポイントです。
確認画面を追加する場合も、ユーザーにとって使いやすいこと、そして管理者側で確実に問い合わせを受け取れることの両方を意識して設定しましょう。
Contact Form 7に関する関連記事
- Contact Form 7でサンクスページを作る方法｜リダイレクト設定・注意点まで解説
- Contact Form 7で自動返信メールを設定する方法｜メール（2）の使い方と届かないときの対処法
