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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

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

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

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

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

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

functions.phpに記述する方法

せっかくなので簡単に解説しておきます。まず2・3行目でお問い合わせとサンクスページのスラッグを変数にセットしています。そして専用のファンクション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」

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

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

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

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

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

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

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

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

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

💻ウェブサイト運営でお困りの方へ

⇒ WordPressの設定ミスを即日で解決  安心の定額サポート