Tech
Contact Form 7 に確認画面を追加する方法｜コード不要で実装する
WordPress定番フォーム Contact Form 7（CF7）には標準で確認画面がない。
誤送信・離脱を防ぐ「入力→確認→送信→完了」フローを、JavaScript自作とプラグインの両方で解説。
コード不要で無料実装する手順も紹介。
Contact Form 7（CF7）はWordPressフォームの事実上の標準ですが、標準では 入力内容の確認画面がありません。
送信ボタンを押すと、確認をはさまずそのまま送信が完了します。
問い合わせや申込みフォームで確認画面がないと、ユーザーの誤送信・入力ミスが増え、「連絡先が間違っている」「内容が途中で切れている」といった不完全な問い合わせにつながります。
BtoBの見積もり依頼や予約フォームでは特に痛手です。
この記事では、CF7に確認画面を付ける方法を JavaScriptで自作する方法 と プラグインで実装する方法 の両方で解説します。
なぜ Contact Form 7 に確認画面がないのか
CF7はシンプルさを重視した設計で、「入力→送信」の1ステップ完結が基本思想です。
入力→確認→送信の2ステップ構成は標準機能に含まれていません。
かつて定番だった確認画面アドオン（Contact Form 7 add confirm）は更新が約8年間止まっており、最新のCF7・WordPressでは正常に動かないケースが多発しています。
そのため、自前で実装するか、対応プラグインを導入するかの2択になります。
add confirm を使っていたサイトの移行手順は Contact Form 7 add confirm が使えない！公開終了後の代替方法3選 で詳しく解説しています。
方法1：JavaScript で簡易確認画面を作る
実装の手軽さ ★☆☆
最小構成なら、JavaScriptで「入力値を確認エリアに表示してから送信」を擬似的に作れます。
フォームに確認用ボタンと表示エリアを置き、ボタン押下で入力値を流し込む方法です。
[text* your-name placeholder "お名前"]
[email* your-email placeholder "メールアドレス"]
[textarea your-message placeholder "お問い合わせ内容"]
<div class="cf7-confirm-area" style="display:none;"></div>
<button type="button" class="cf7-confirm-btn">入力内容を確認する</button>
[submit class="cf7-submit-hidden" "この内容で送信する"]
テーマの functions.php か専用JSファイルに、確認ボタン押下で入力値を確認エリアへ表示する処理を書きます。
ただし、この方法には限界があります。
- 入力値検証（バリデーション）がCF7本体と二重管理になり崩れやすい
- ラジオボタン・チェックボックス・ファイル添付など複雑な項目の整形が面倒
- 「修正する」で戻る動作、スクロール位置、スマホ対応まで作り込むと数百行に膨らむ
- CF7やWordPressのアップデートで壊れた際、自分で保守する必要がある
名前とメールだけの単純なフォームなら有効ですが、項目が増える・複数フォームを運用するなら保守コストが見合いません。
方法2：プラグインで確認画面を実装する
実装の手軽さ ★★★
確認画面を 設定だけで追加 できるのがプラグイン方式です。
コードを書かず、CF7の管理画面で確認ステップを有効化するだけで、入力→確認→送信→完了のフローが生成されます。
Frontierline Forms は、Contact Form 7 をそのまま拡張するアドオン型プラグインです。
既存のCF7フォームを作り直す必要はなく、無料版 で以下が手に入ります。
- 入力→確認→送信→完了の 確認画面付きフロー を追加
- ラジオ・チェックボックス・ファイル添付も 自動で整形表示
- 「修正する」で入力画面へ戻る動作も標準装備
- スマホ対応・スクロール制御込み
- 完了後リダイレクトでGA4のコンバージョン計測にも対応
- 複数ステップに分割する マルチステップ にも拡張可能（作り方はこちら）
CF7の資産（既存フォーム・自動返信メール設定）をそのまま活かせるため、移行コストはほぼゼロです。
確認画面・マルチステップ・送信ログのDB保存は、いずれも無料版で無制限に使えます。
コード方式とプラグイン方式の比較
| 項目 | JavaScript自作 | Frontierline Forms |
|---|---|---|
| 費用 | 無料 | 無料 |
| 実装時間 | 数時間〜 | 数分 |
| 複雑な項目の整形 | 手動で作り込み | 自動 |
| 修正ボタン・スマホ対応 | 自作 | 標準装備 |
| アップデート時の保守 | 自分で対応 | プラグインが対応 |
| マルチステップ化 | 大幅改修 | 設定で切替 |
単発・単純なフォームならコード方式、継続運用・複数フォーム・確実な動作 を求めるならプラグイン方式が合理的です。
スパム対策や送信ログの保存もあわせて検討するなら、別記事「Contact Form 7 のスパムと送信ログ問題を実装で解決する」も参考にしてください。
Cloudflare Turnstile によるスパム対策と確認画面を同じフォームで使えるかは Contact Form 7 で Turnstile と確認画面を併用する方法 にまとめています。
WordPress Plugin
確認画面、設定だけで追加できます。
Contact Form 7 に「入力→確認→送信→完了」フローを、コードを書かず追加する拡張プラグイン Frontierline Forms。確認画面・マルチステップ・送信ログのDB保存は 無料・無制限。Slack/Chatwork通知や自動返信が必要なら Pro 版（年額＄39.99〜）でまとめて巻き取れます。
まとめ
Contact Form 7 に確認画面を追加するには、JavaScriptで自作する方法と、プラグインで実装する方法があります。
名前とメールだけの単純なフォームなら自作でも足りますが、項目が多い・複数フォームを運用する・保守の手間を減らしたいなら、プラグイン方式が時間とリスクの両面で有利です。
Frontierline Forms なら、既存のCF7フォームを作り直さずに確認画面を無料で追加でき、マルチステップやファイル添付の整形にも対応します。
WordPressサイトのフォーム改修のご相談は お問い合わせフォーム まで。