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」となるので以下へ変更しましょう。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

<?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」箇所はランディングページを設置される独自ドメインと置き換えてください。

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類
お問い合わせの種類をお選びください（もっとも近い項目）

お名前 *
法人の場合は法人名とご担当者のお名前をご入力ください

メールアドレス *
返信時のご連絡に利用するメールアドレスをご入力ください

運営中（予定）のURL
運営中のウェブサイトURLがあればご入力ください

ご相談内容
お困りの内容があれば詳しい内容をお聞かせください