Contact Form 7に確認画面と完了画面を追加する方法｜Multi-Step Forms・wpcf7mailsentリダイレクト

WordPress
2023.05.04

Contact Form 7（CF7）はデフォルトでは確認画面・完了画面の機能を持ちません。この記事では Contact Form 7 Multi-Step Forms プラグインで確認画面を追加し、送信後に完了画面へリダイレクトする方法を解説します。リダイレクトは現行CF7で動く wpcf7mailsent イベントで実装します。

この記事でわかること

  • Multi-Step Forms プラグインで入力→確認の2ステップを作る
  • 完了画面へのリダイレクト（非推奨の on_sent_ok は使わない）
  • wpcf7mailsent DOMイベントでのリダイレクト
  • MW WP Form など確認画面を作る代替手段
確認画面・完了画面のメリット
確認画面は入力ミスの発見と送信エラーの削減に役立ち、完了画面は送信成功をユーザーに明確に伝えられます。フォームのUXと収集データの精度が上がります。
スポンサーリンク

Multi-Step Formsプラグインで実装する

管理画面の「プラグイン」→「新規追加」で「Contact Form 7 Multi-Step Forms」を検索し、インストール・有効化します。

Contact Form 7 Multi-Step Forms プラグインのインストール

次に、Contact Form 7で2つのフォームを作成します。1つ目は通常の入力フォーム、2つ目は確認画面用です。確認画面用は各フィールドを readonly にし、default:user-xxx で前ステップの入力値を表示します。

CF7：入力フォーム（ステップ1）
お名前 (必須)
[text* your-name]

メールアドレス (必須)
[email* your-email]

お問い合わせ内容
[textarea your-message]

[submit "次へ"]
CF7：確認画面用フォーム（ステップ2・readonly）
お名前
[text your-name readonly default:user-name]

メールアドレス
[email your-email readonly default:user-email]

お問い合わせ内容
[textarea your-message readonly default:user-message]

[submit "送信"]

続いて、各フォームの編集画面の「Multi-Step Forms」タブで2つを連携します。

  • 入力フォーム：「Step 2 Form ID」に確認画面用フォームのIDを入力
  • 確認画面用フォーム：「Step 1 Form ID」に入力フォームのIDを入力し、「Final Step」にチェック

あとは入力フォームのショートコードを問い合わせページに貼り付けて公開すれば、入力→確認の2ステップになります。

完了画面へリダイレクトする（wpcf7mailsent）

on_sent_ok は使わない（削除済み）
古い記事では「追加設定」タブに on_sent_ok: "location.replace(...)" と書く方法が紹介されていますが、on_sent_ok はContact Form 7 v4.1（2015年）で削除され、現行CF7では動作しません。代わりに、送信成功時に発火するDOMイベント wpcf7mailsent をJavaScriptで購読してリダイレクトします。

テーマの footer.php や、子テーマで読み込むJSファイルに次のコードを追加します。

JavaScript：送信成功時に完了ページへ
document.addEventListener('wpcf7mailsent', function (event) {
  // 必要なら特定フォームだけに限定: if (event.detail.contactFormId == 123) { ... }
  location.replace('/thank-you/');
}, false);

最後に、スラッグ thank-you の固定ページを作成し、完了メッセージを記載すれば完了画面になります。フォーム送信まわりのトラブル（送信できない等）はContact Form 7で「送信できない」時の原因と解決チェックリストを参照してください。

確認画面を作る代替手段

Multi-Step Forms以外にも確認画面を実現する方法があります。

  • MW WP Form：確認画面・完了画面が標準機能。確認フローを組みやすい
  • JavaScriptでモーダル確認：送信前に入力内容をモーダルで表示して確認させる
  • 自前の2ステップ：hiddenフィールド＋nonce（wp_nonce_field()/check_admin_referer()）で入力→確認→送信を実装

CF7のフォーム自体のカスタマイズ（class/id付与・送信前の値加工・宛先の動的変更）はformタグにclass・idを設定する方法、入力内容を一部加工して送信する方法、宛先をカスタムフィールドから動的に変更する方法も参考になります。

よくある質問（FAQ）

QContact Form 7に確認画面を追加するには？
AContact Form 7 Multi-Step Forms プラグインで入力フォームと確認用フォームを連携させます。または MW WP Form プラグインは確認画面・完了画面が標準搭載で、確認フローを組みやすいです。
Qon_sent_ok で完了画面に飛ばす方法が動きません。
Aon_sent_ok は Contact Form 7 v4.1（2015年）で削除済みです。現行CF7では動きません。送信成功時のDOMイベント wpcf7mailsent をJavaScriptで購読し、location.replace('/thank-you/') でリダイレクトしてください。
Q確認画面→送信の2ステップを自前実装するには？
A入力値をhiddenフィールドやセッションに一時保存して2画面構成にします。ステップ1（入力）→ ステップ2（確認・非表示input）→ 送信。セキュリティのため wp_nonce_field() と check_admin_referer() で nonce 検証を入れてください。

まとめ

  • 確認画面：Multi-Step Forms で入力フォームと確認用フォームを連携
  • 完了画面リダイレクト：on_sent_ok は削除済み → wpcf7mailsent イベントを使う
  • 代替：MW WP Form（確認画面が標準）／nonce付きの自前2ステップ

リダイレクトだけ現行の wpcf7mailsent に置き換えれば、確認画面付きフォームを問題なく運用できます。