Contact Form 7でサンクスページへ自動で遷移させる方法【Contact Form 7】

Contact Form 7（CF7）では、フォーム送信後に「サンクスページ」へ遷移させたいケースがよくあります。

しかし、JavaScript の書き方によっては 動かなかったり、テーマによってエラーが出る ことがあります。

本記事では、メール送信が「成功した瞬間」に確実にサンクスページへ遷移させる方法を、WordPress 側に安全に組み込む形で解説します。

1 よくある失敗例

• 無名関数で書いていて、テーマ更新後に動かなくなった
• jQuery 前提で、読み込み順の問題が出た
• CF7 のイベントを正しく拾えていない

そこで今回は、CF7公式イベント + WordPressフックを使った、安定して動作する方法を紹介します。

2 CF7で使うイベントについて

Contact Form 7 には、メール送信が成功したときに発火するwpcf7mailsent という JavaScript イベントがあります。

このイベントを使うことで、送信完了後だけ サンクスページへ遷移させることができます。

3 function.php にコードを追加

以下のコードを functions.phpに追加してください。

//----------------------------------------------
// サンクスページへ自動で遷移
//----------------------------------------------
add_action('wp_footer', 'cf7_redirect_thanks');
function cf7_redirect_thanks() {
    ?>
    <script>
    document.addEventListener('wpcf7mailsent', function(event) {
        location.href = 'https://konno-legal.com/thanks';
    }, false);
    </script>
    <?php
}
  

3.1 コードのポイント解説

• add_action('wp_footer', ...)：フッターで確実に JavaScript を読み込む
• wpcf7mailsent：メール送信成功時のみ発火
• location.href：指定URLへリダイレクト
• 無名関数を PHP 側で使わないため、テーマ変更にも強い

4 特定のフォームだけ遷移させたい場合

複数の Contact Form 7 を使っている場合は、event.detail.contactFormId を使ってフォームIDで分岐できます。

<script>
document.addEventListener('wpcf7mailsent', function(event) {
    if (event.detail.contactFormId == 123) {
        location.href = 'https://konno-legal.com/thanks';
    }
}, false);
</script>
  

※ 123 の部分は、対象フォームの ID に置き換えてください。

5 動作確認のチェックポイント

• CF7 のメール送信が正常に完了しているか
• ブラウザのキャッシュをクリアしているか
• サンクスページの URL が正しいか

6 まとめ

Contact Form 7 でのサンクスページ遷移は、JavaScript の書き方次第で安定性が大きく変わります。

今回紹介した方法は、

• 公式イベントを使用
• テーマに依存しにくい
• 実運用でトラブルが出にくい

という点で、実務向きの実装です。