Contact Form 7で設置したお問い合わせフォームの送信完了時にプラグインを使わずサンクスページ（/thanks）へ転送させる方法

Contact Form 7はデフォルトでは送信完了時にサンクスページへ転送をかける機能がありません。そのためGoogleアナリティクスを導入していてもコンバージョン率（成約率）の測定ができなくなっています。

そこで本日は「送信完了時にサンクスページへのリダイレクトをかける方法」をまとめさせていただきました。なお、お問い合わせページ（/contact）とサンクスページ（/thanks）は固定ページですでに作られているのが前提条件となるのでご注意ください。あとご要望が多かったのでカンタン導入プラグインも公開いたしました。

Contact Form 7のサンクスページ転送をカンタン導入できる便利プラグイン「Contact Form 7 Easy Thanks Page Redirect」

Contact Form 7で設置したお問い合わせフォームの送信完了時にプラグインを使わずサンクスページ（/thanks）へ転送させる方法

以下では直接カスタマイズする方法を２パターンご紹介させていただきます。

functions.phpに記述する方法

せっかくなので簡単に解説しておきます。まず２・３行目でお問い合わせとサンクスページのスラッグを変数にセットしています。そして専用のファンクションredirect_thanks_page()を作成。if( is_page($contact) ) {は「もしスラッグがcontactの固定ページなら」という条件文となります。

そしてContact Form 7送信完了時に発生するイベント'wpcf7mailsent'を「お問い合わせページ（contact）」で受け取るとhome_url('/'.$thanks);へリダイレクトする処理を実行しています。ちなみにhome_url();ではワードプレスのトップページURLを取得して最後に'/'を足して.で$thanksと連結して「example.com/thanks」へ転送をかけている流れとなります。カスタマイズ用ソースは下記です。

//お問い合わせと送信完了（固定ページ）のスラッグをセットする
$contact = 'contact';
$thanks = 'thanks';

//お問い合わせフォームの送信後にサンクスページへ飛ばす
add_action( 'wp_footer', 'redirect_thanks_page' );
function redirect_thanks_page() {
  global $contact;
  global $thanks;

  if( is_page($contact)  ) {
  ?>
  <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = '<?php echo home_url('/'.$thanks); ?>'; // 遷移先のURL
    }, false );
  </script>
  <?php }
}

もし仮にサンクスページを「お問い合わせの子ページ」として作成する場合はサンクスページURLが「example.com/contact/thanks」となるので以下へ変更しましょう。ソースを書きながら解説すると複雑ですね。

<?php echo home_url('/'.$contact.'/'.$thanks); ?>

すべてまとめて書き直すと下記です。

//お問い合わせと送信完了（固定ページ）のスラッグをセットする
$contact = 'contact';
$thanks = 'thanks';

//お問い合わせフォームの送信後にサンクスページへ飛ばす
add_action( 'wp_footer', 'redirect_thanks_page' );
function redirect_thanks_page() {
  global $contact;
  global $thanks;

  if( is_page($contact)  ) {
  ?>
  <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = '<?php echo home_url('/'.$contact.'/'.$thanks); ?>'; // 遷移先のURL
    }, false );
  </script>
  <?php }
}

直接html上に記述する方法

html上へ直接記述する場合は以下の一文のみでOKです。個別でランディングページを立ち上げた状況などで、サンクスページへ転送する処理をかけたい場合などにご活用ください。お好みの方で構いません。

<script>document.addEventListener('wpcf7mailsent',function(event){ location='//example.com/thanks/'; },false);</script>

上記の「//example.com」箇所はランディングページを設置される独自ドメインと置き換えてください。

補足

ご要望が多かったのでContact Form 7にサンクスページ転送を設定するための専用プラグインをご用意させていただきました。プラグインの名前は「Contact Form 7 Easy Thanks Page Redirect」です。

念のために「サンクスページが検索エンジンにひっかからない対策」も取り入れている便利なプラグインなのでまずは記事をチェックお願いいたします。もし気に入ったらダウンロードしてご使用くださいませ。

Contact Form 7のサンクスページ転送をカンタン導入できる便利プラグイン「Contact Form 7 Easy Thanks Page Redirect」

設定に不安がある方はお気軽にご連絡いただければ幸いです。