Contact Form 7 に確認画面・完了画面を追加する方法

Contact Form 7（CF7）は送信ボタンを押すと、確認をはさまずそのまま送信が完了します。
標準に確認画面がないためです。
問い合わせや申込フォームで確認画面がないと、誤った連絡先や入力ミスに気づけず、不完全な問い合わせが増えます。

この記事ではCF7に「入力→確認→送信→完了」フローを追加する方法を、コード不要の設定と自前実装の両方で解説します。

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

確認画面は、送信前にユーザー自身が入力内容を見直す最後の関門になります。
メールアドレスの打ち間違い、電話番号の桁抜け、本文の途中送信——これらは確認画面がひとつあるだけで大きく減ります。
特にBtoBの見積もり依頼や予約フォームでは、1件の不備が商談の遅延につながるため、確認画面の有無が問い合わせの質を左右します。

方法1：設定画面だけで完結させる（コード不要・おすすめ）

functions.php もJavaScriptも書かず、WordPress管理画面の設定だけで確認画面・完了画面を追加できます。
Frontierline Forms を使えば、既存のCF7フォームを作り直さず次の手順で完了します。

手順

1. 確認画面を有効化：設定画面で確認画面をオンにすると、送信前に入力内容の一覧が表示されます。
2. 表示項目と修正導線を整える：確認画面に出す項目を選び、入力画面へ戻る「修正する」ボタンを設置します。
3. 完了画面・リダイレクトを設定：送信後の完了メッセージ、またはサンクスページへのリダイレクト先URLを指定します（GA4計測にも対応）。
4. テスト送信：入力→確認→修正→送信→完了の流れと表示を確認します。

ラジオボタン・チェックボックス・ファイル添付も確認画面で自動整形表示されます。
スマートフォンでの画面切替・スクロール位置も自動制御されるため、表示崩れを自前で調整する必要がありません。

方法2：JavaScriptで自前実装する（上級者向け）

プラグインを使わない場合、確認用の表示エリアと「確認する」ボタンをフォームに置き、JavaScriptで入力値を確認エリアへ流し込み、送信ボタンと切り替えます。
CF7のバリデーションと組み合わせる方法もあります。

ただし、次の点でつまずきやすいです。

• 入力値の同期が面倒：確認画面へ値を反映し、戻って修正しても保持する処理を自前で書く必要があります。
• 複雑な項目の整形：ラジオ・チェックボックス・ファイル添付を見やすく整形するコードが膨らみます。
• 保守がテーマに紐づく：JS・CSSがテーマ依存になり、テーマ変更や引き継ぎで壊れます。フォームごとにコードが分岐して属人化します。

名前とメールだけの単純なフォームなら自前でも作れるが、項目が多い・複数案件で使い回すなら設定で完結する方法1が現実的です。

マルチステップと組み合わせる

確認画面はマルチステップフォームと組み合わせると効果的です。
「入力（複数ステップ）→確認→送信→完了」の本格的なフローを、いずれも無料版・設定だけで構築できます。
長い申込・見積もりフォームの離脱を抑えつつ、送信前の確認で精度も担保できます。

まとめ

CF7標準に確認画面はないため、JavaScriptで自前実装するか、対応プラグインで設定するかのどちらかになります。
入力値の同期や複雑な項目の整形は自前だと重く、複数案件で使い回すなら設定で完結する方法が速いです。
確認画面・完了画面・マルチステップはいずれも無料版で利用できます。

確認・完了画面に加え、Slack/Chatwork/スプレッドシート通知、メール自動返信、送信ログのDB保存、CSV出力まで設定だけで実装したいなら、Frontierline Forms の導入を検討してください。