【WordPress】Contact Form 7に完了画面を追加する方法｜wpcf7mailsentでリダイレクト・ページ内メッセージ

WordPress
2023.05.04

Contact Form 7（CF7）はデフォルトでは、送信しても完了画面が出ず「送信できたのか」が分かりにくいです。この記事では、送信成功時に発火するDOMイベント wpcf7mailsent を使って、サンキューページへリダイレクトする方法と、リダイレクトせずページ内に完了メッセージを表示する方法の2通りを解説します。

この記事でわかること

  • wpcf7mailsent でサンキューページへリダイレクトする（2つの設置方法）
  • 特定のフォームだけリダイレクトする（フォームID判定）
  • リダイレクトせずページ内に完了メッセージを表示する
  • 入力→確認→完了の確認画面を付けたい場合の参照先
「完了画面」は2通りの作り方がある
(A) リダイレクト：送信成功で専用のサンキューページへ移動する。(B) ページ内表示：移動せず、その場で完了メッセージを表示する。送信前に内容を確認させる確認画面まで作りたい場合はContact Form 7に確認画面と完了画面を追加する方法を参照してください。
スポンサーリンク

(A) サンキューページへリダイレクトする

まず完了画面となる固定ページ（例：スラッグ thank-you）を作成しておきます。そのうえで、送信成功時にそのページへ移動するJavaScriptを設置します。

設置方法1：functions.php（全ページ共通）

テーマの functions.php で wp_footer にスクリプトを出力すると、サイト全体で有効になります。

functions.php：wp_footerでリダイレクトを出力
add_action('wp_footer', 'my_cf7_redirect');
function my_cf7_redirect() {
?>
<script>
document.addEventListener('wpcf7mailsent', function (event) {
  location.href = '/thank-you/'; // 完了ページのURLに置き換え
}, false);
</script>
<?php
}

設置方法2：専用JSファイルで読み込む（おすすめ）

ページ本文に直接書くと、フォームを置くページごとに貼り直しが必要で管理が大変です。専用のJSファイルを作って wp_enqueue_script で読み込むと一括管理できます。スクリプトの中身は次のとおりです。

JavaScript：送信成功でリダイレクト
document.addEventListener('wpcf7mailsent', function (event) {
  location.href = 'https://example.com/thank-you/'; // 完了ページのURL
}, false);
特定のフォームだけリダイレクトする
複数フォームがある場合、event.detail.contactFormId でフォームIDを判定すれば、対象フォームの送信時だけリダイレクトできます。JSの読み込み（wp_enqueue_script）についてはContact Form 7でformタグにclass・idを設定する方法と合わせてフォーム単位の制御がしやすくなります。
JavaScript：対象フォームだけ（フォームID判定）
document.addEventListener('wpcf7mailsent', function (event) {
  if (event.detail.contactFormId == 123) { // 対象フォームのIDに置き換え
    location.href = '/thank-you/';
  }
}, false);

(B) リダイレクトせずページ内に完了メッセージを表示する

ページ遷移させたくない場合は、最初は隠しておいた完了メッセージを、送信成功時に表示する方法が手軽です。フォームの近くに hidden の要素を置きます。

HTML：完了メッセージ（最初は非表示）
<div id="cf7-thanks" hidden>
  <p>お問い合わせありがとうございました。近日中にご返信します。</p>
</div>

送信成功時に表示し、必要なら送信済みフォームを隠します。

JavaScript：完了メッセージを表示
document.addEventListener('wpcf7mailsent', function (event) {
  document.getElementById('cf7-thanks').hidden = false; // メッセージを表示
  event.target.style.display = 'none'; // 送信済みフォームを隠す（任意）
}, false);
イベントは現行CF7の wpcf7mailsent を使う
古い記事で見かける on_sent_ok は Contact Form 7 v4.1（2015年）で削除済みで動きません。完了処理は必ず DOMイベント wpcf7mailsent（送信成功）で行ってください。なお wpcf7submit（送信時）・wpcf7invalid（バリデーションエラー）など他のイベントもあります。

確認画面や送信トラブルへの対応

送信前に内容を確認させる確認画面（入力→確認→完了）を作りたい場合はContact Form 7に確認画面と完了画面を追加する方法、そもそも送信できないトラブルは「送信できない」時の原因と解決チェックリスト、宛先を投稿ごとに切り替えたい場合は宛先をカスタムフィールドから動的に変更する方法を参照してください。

よくある質問（FAQ）

QCF7の送信後に特定のページへリダイレクトするには？
Awpcf7mailsent イベントで location.href = '/thank-you/' とします。document.addEventListener('wpcf7mailsent', function (e) { location.href = '/thank-you/'; });。PHP側で処理したい場合は wpcf7_mail_sent アクションフックも使えます。
Q送信前にJavaScriptで確認モーダルを表示するには？
Awpcf7submit イベントを使います。document.addEventListener("wpcf7submit", function (e) { /* 確認モーダル表示 */ });。CF7のバリデーションを通過してから表示されるよう、順序に注意してください。
Qリダイレクトとページ内表示、どちらがよいですか？
A専用のサンキューページでお礼やCV計測（コンバージョン）をしたいならリダイレクト、入力した文脈を保ったまま手軽に完了を伝えたいならページ内表示が向いています。用途に合わせて選んでください。

まとめ

  • リダイレクト：wpcf7mailsent ＋ location.href。専用JSファイルで一括管理
  • 特定フォームだけ：event.detail.contactFormId で判定
  • ページ内表示：hidden 要素を送信成功時に表示
  • 確認画面まで付けたいなら Multi-Step（別記事）を併用

完了画面があるだけで「送信できた」という安心感が大きく変わります。リダイレクトかページ内表示か、サイトに合う方法で実装してみてください。