Contact Form 7のサンクスページをプラグインなしで実装する方法

ハシビィくん

Contact Form7でサンクスページを実装したいっす！

カピーさん

公式では用意されていないので、こちらで用意する必要があるぞ。でも今回は簡単かつ現場レベルで使える方法を紹介していくぞ。

Contact Form 7でお問い合わせフォームを運用していると、送信後にサンクスページへ遷移させたい場面があります。たとえば、資料請求後に案内を表示したい場合や、問い合わせ後の次の行動を分かりやすくしたい場合です。

Contact Form 7には、標準でサンクスページを指定する設定はありません。ただし、追加のリダイレクト用プラグインを入れなくても、送信成功時に発火するJavaScriptイベントを使えば実装できます。

この記事では、子テーマへコードを追加する方法を紹介します。テーマファイルの編集に不安がある場合は、事前にバックアップを取り、テスト環境または公開前の確認ページで動作を確認してください。

Contact Form 7はプラグインなしでサンクスページへ遷移できる

実装の中心になるのは、Contact Form 7がメール送信に成功したときに発火する wpcf7mailsent イベントです。このイベントを受け取ったときだけ、指定したURLへ遷移させます。

以前は on_sent_ok という追加設定を使う方法もありましたが、現在は使えません。Contact Form 7公式もDOMイベントを使う方法を案内しています。

なお、Google Analyticsなどでフォーム送信を計測したいだけなら、サンクスページへの遷移は必須ではありません。ページ遷移が必要な理由があるかを、先に整理しておくとよいでしょう。

実装前に用意するもの

まず、遷移先となる固定ページを作成します。スラッグ（URL)は thanks や contact-thanks のように、役割が分かるものがおすすめです。ページ内には、送信へのお礼、返信までの目安、関連サービスや公式LINEなど、次に確認してほしい情報を整理します。

カピーさん

複数パターンで使うなら固定ページやスラッグで判別できるようにすると管理が楽だぞ。

次に、対象のContact Form 7のフォームIDを確認します。お問い合わせフォームが1つだけなら必須ではありませんが、複数のフォームを使っているサイトでは、意図しないフォームまで遷移しないようIDで限定します。

JavaScriptは、フォーム編集画面へ直接貼るより、子テーマのファイルとして管理する方が更新時の確認がしやすくなります。

サンクスページへ遷移させる手順

1. JavaScriptファイルを読み込む

子テーマ内に assets/js/cf7-thanks-redirect.js を作成し、functions.php に次のような処理を追加します。contact はお問い合わせページのスラッグに合わせて変更してください。

function own_enqueue_cf7_thanks_redirect() {
    if ( is_page( 'contact' ) ) {
        wp_enqueue_script(
            'cf7-thanks-redirect',
            get_stylesheet_directory_uri() . '/assets/js/cf7-thanks-redirect.js',
            array(),
            '1.0.0',
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'own_enqueue_cf7_thanks_redirect' );

ページを限定して読み込むことで、不要なページまでスクリプトを読み込まずに済みます。

2.送信成功時に遷移する処理を追加する

作成した cf7-thanks-redirect.js に、次のコードを追加します。123 は対象フォームのID、/thanks/ はサンクスページのURLに置き換えてください。

document.addEventListener( 'wpcf7mailsent', function( event ) {
    const targetFormId = 123;

    if ( Number( event.detail.contactFormId ) !== targetFormId ) {
        return;
    }

    window.location.href = '/thanks/';
}, false );

この方法では、必須項目の未入力やメール送信の失敗では遷移しません。送信が成功したときだけサンクスページへ移動します。

フォームが1つだけで、IDによる限定が不要な場合は、条件分岐を省いた構成でも問題ありません。ただし、将来的にフォームを増やす予定があるなら、最初からIDを指定しておく方が安全です。

複数IDを指定するという場合は、下記をサンプルに。

document.addEventListener( 'wpcf7mailsent', function( event ) {
    const targetFormIds = [ 123, 456 ];
    const formId = Number( event.detail.contactFormId );

    if ( ! targetFormIds.includes( formId ) ) {
        return;
    }

    window.location.href = '/thanks/';
}, false );

設定後に確認したいポイント

設定後は、PCだけでなくスマートフォンでもテスト送信してください。特に確認したいのは、次の4点です。

• 正常に送信したときだけサンクスページへ遷移するか
• 入力エラーのときに遷移しないか
• サンクスページが404にならないか
• 問い合わせメールが実際に届くか

遷移しない場合は、フォームID、JavaScriptファイルの読み込み、ブラウザのコンソールエラーを順に確認します。SMTPなどメール送信の設定に問題がある場合は、wpcf7mailsent 自体が発火しません。

サンクスページを作らなくてもよいケース

フォーム送信をアクセス解析で計測したいだけなら、サンクスページは必須ではありません。Contact Form 7のDOMイベントを使って、送信成功をイベントとして計測する方法もあります。

一方で、送信後に資料ダウンロードや予約案内を見せたい場合、問い合わせ後の流れを説明したい場合には、サンクスページが役立ちます。目的に合わせて、ページ遷移の有無を決めてください。

コード修正が不安な場合はスポット対応も検討する

既存テーマのJavaScriptやフォーム関連プラグインとの競合を確認しながら実装する必要がある場合は、WordPressのスポット修正で対応できます。サンクスページへの遷移だけでなく、フォームの表示改善、スパム対策、問い合わせ導線の整理も含めて見直せます。

【実体験】

まとめ：Contact Form 7のサンクスページをプラグインなしで実装する方法

Contact Form 7のサンクスページは、追加プラグインなしでも実装できます。ポイントは、旧式の追加設定ではなく、送信成功時に発火する wpcf7mailsent を使うことです。

ただし、サンクスページは常に必要なわけではありません。計測だけが目的なのか、送信後に案内したい内容があるのかを整理してから実装すると、不要なページ遷移を避けられます。