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

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

以前は on_sent_ok を使って送信後の処理を実行する方法が使われていましたが、
この方法は現在の Contact Form 7 では利用できません。

現在は、Contact Form 7 が用意している JavaScript の DOM イベント
wpcf7mailsent を利用する方法があります。

本記事では、Contact Form 7 のメール送信処理が正常に完了したときだけ、サンクスページへ遷移させる方法を、
WordPress の functions.php に組み込む形で解説します。

1 Contact Form 7でサンクスページへ遷移させる仕組み

Contact Form 7 には、フォームの状態に応じて発火する複数の JavaScript イベントがあります。

今回使用するのは、次のイベントです。

wpcf7mailsent

このイベントは、Contact Form 7 の AJAX によるフォーム送信が完了し、
メール送信処理が行われた場合に発火します。

そのため、送信ボタンをクリックしただけでサンクスページへ移動するのではなく、
Contact Form 7 の送信処理が正常に完了したあとにリダイレクトできます。

なお、ここでいう「メール送信完了」は Contact Form 7 側のメール送信処理が完了したことを意味します。
相手のメールサーバーや受信トレイへの最終的な到達まで保証するものではありません。

2 よくある失敗例

• 現在は廃止されている on_sent_ok を使っている
• 送信ボタンのクリックイベントだけでリダイレクトしている
• 入力エラーの有無を確認せずにリダイレクトしている
• Contact Form 7 が非AJAX送信になっている
• 他の JavaScript エラーによってイベントが正常に動作していない

特に注意したいのが、送信ボタンのクリックだけを監視する方法です。

この方法では、必須項目の入力漏れやメール送信エラーがあっても処理が実行される可能性があります。

Contact Form 7 の送信結果に合わせて処理したい場合は、
Contact Form 7 が用意している DOM イベントを利用するのが適切です。

3 functions.php にコードを追加

子テーマを使用している場合は、子テーマの functions.php に以下のコードを追加します。

親テーマの functions.php を直接編集すると、
テーマ更新時に追加したコードが消える可能性があるため、子テーマへの追加をおすすめします。

//----------------------------------------------
// Contact Form 7
// 送信完了後にサンクスページへ遷移
//----------------------------------------------
add_action( 'wp_footer', 'cf7_redirect_thanks' );

function cf7_redirect_thanks() {
    ?>
    <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        window.location.href = 'https://example.com/thanks/';
    }, false );
    </script>
    <?php
}
  

https://example.com/thanks/ の部分を、
実際に使用するサンクスページの URL に変更してください。

3.1 コードのポイント

• add_action( 'wp_footer', ... )：WordPress のフッター領域に JavaScript を出力
• wpcf7mailsent：Contact Form 7 のメール送信処理が完了した場合に発火
• window.location.href：指定したサンクスページへ移動

4 wpcf7mailsent を使う理由

単純に送信ボタンのクリックイベントを使った場合、
「ボタンが押された」ということしか確認できません。

たとえば、必須項目が入力されていなかった場合でも送信ボタン自体はクリックできます。

一方、wpcf7mailsent は Contact Form 7 の送信処理の結果に応じて発火するイベントです。

そのため、
フォームの入力チェックを通過し、Contact Form 7 のメール送信処理が完了したあとだけサンクスページへ移動させたい場合
に適しています。

5 特定のフォームだけサンクスページへ遷移させる方法

1つのサイトで複数の Contact Form 7 を使用している場合は注意が必要です。

先ほどのコードでは、サイト内にあるすべての Contact Form 7 が対象になります。

たとえば、

• お問い合わせフォーム
• 資料請求フォーム
• 予約フォーム

など複数のフォームが存在する場合、
特定のフォームだけサンクスページへ遷移させたいことがあります。

その場合は、event.detail.contactFormId を使って Contact Form 7 のフォームIDを判定します。

//----------------------------------------------
// Contact Form 7
// 特定フォームのみサンクスページへ遷移
//----------------------------------------------
add_action( 'wp_footer', 'cf7_redirect_thanks' );

function cf7_redirect_thanks() {
    ?>
    <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {

        if ( '123' == event.detail.contactFormId ) {
            window.location.href = 'https://example.com/thanks/';
        }

    }, false );
    </script>
    <?php
}
  

123 の部分を、対象となる Contact Form 7 のフォームIDに変更してください。

また、
https://example.com/thanks/ の部分を、
実際のサンクスページの URL に変更します。

6 Contact Form 7 のフォームIDを確認する方法

WordPress の管理画面から、
「お問い合わせ」→「コンタクトフォーム」を開きます。

使用しているフォームのショートコードなどに表示されている ID を確認してください。

その ID を、先ほどのコードにある
123 の部分へ指定します。

7 複数のフォームで遷移先を変える場合

フォームごとに異なるサンクスページへ移動させることもできます。

//----------------------------------------------
// Contact Form 7
// フォームごとに遷移先を変更
//----------------------------------------------
add_action( 'wp_footer', 'cf7_redirect_thanks' );

function cf7_redirect_thanks() {
    ?>
    <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {

        if ( '123' == event.detail.contactFormId ) {
            window.location.href = 'https://example.com/contact-thanks/';
        }

        if ( '456' == event.detail.contactFormId ) {
            window.location.href = 'https://example.com/reservation-thanks/';
        }

    }, false );
    </script>
    <?php
}
  

このようにフォームIDを判定すれば、
お問い合わせフォームと予約フォームなどで異なるサンクスページを使用できます。

8 動かない場合のチェックポイント

コードを追加してもサンクスページへ移動しない場合は、次の項目を確認してください。

• Contact Form 7 が AJAX 送信で正常に動作しているか
• フォームが正常に送信できているか
• ブラウザの開発者ツールに JavaScript エラーが出ていないか
• フォームIDが正しいか
• サンクスページの URL が正しいか
• キャッシュ系プラグインやサーバーキャッシュの影響がないか
• 使用しているテーマで wp_footer() が正常に実行されているか

8.1 非AJAX送信ではイベントが発火しない

wpcf7mailsent などの Contact Form 7 の DOM イベントは、
AJAX によるフォーム送信の過程で発火します。

Contact Form 7 が何らかの理由で非AJAX送信になっている場合、
wpcf7mailsent は発火しません。

コードに問題がないのに動作しない場合は、
Contact Form 7 の AJAX 送信自体が正常に動いているか確認してください。

8.2 JavaScript エラーも確認する

他のプラグインやテーマの JavaScript にエラーが発生していると、
Contact Form 7 のイベント処理にも影響する場合があります。

Chrome などのブラウザで開発者ツールを開き、
「Console」に JavaScript エラーが表示されていないか確認すると原因を調べやすくなります。

9 古い on_sent_ok は使わない

古い Contact Form 7 の情報を検索すると、
on_sent_ok を使ったサンクスページへのリダイレクト方法が見つかることがあります。

しかし、on_sent_ok と on_submit は Contact Form 7 5.0 で削除されています。

現在の Contact Form 7 では、
wpcf7mailsent などの DOM イベントを利用します。

10 まとめ

Contact Form 7 でフォーム送信後にサンクスページへ遷移させる場合は、
wpcf7mailsent イベントを利用できます。

この方法なら、単純な送信ボタンのクリックではなく、
Contact Form 7 の送信処理が正常に完了したタイミングでリダイレクトできます。

• wpcf7mailsent を使用する
• wp_footer から JavaScript を出力する
• 複数フォームがある場合は event.detail.contactFormId で判定する
• 古い on_sent_ok は使用しない
• 動かない場合は AJAX 送信と JavaScript エラーを確認する

Contact Form 7 の送信完了後に独自のサンクスページを表示したい場合に使える、
シンプルで実用的な方法です。