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

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

そこで本日は送信完了時にサンクスページへのリダイレクトをかける方法をまとめさせていただきました。なお、お問い合わせページ（/contact）とサンクスページ（/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」箇所はランディングページを設置される独自ドメインと置き換えてください。