Contact Form 7でメール送信後に任意のページにリダイレクトさせる方法

Contact Form 7でメール送信後に任意のページにリダイレクトさせる方法

Contact Form 7でメール送信後に任意のページにリダイレクトさせる方法

以前、Contact Form 7でお問い合わせ時にサンクスページを表示させる方法という記事で、メール送信後にサンクスページにリダイレクトさせる方法をご紹介しました。フォームの「その他の設定」に以下のように記述することで、任意のページにリダイレクトさせることができました。

on_sent_ok: "location.replace('サンクスページのURL');"

しかしながら、on_sent_okとon_submitは2017年末に廃止される予定です。そこで今回は、on_sent_okを使ったリダイレクトの代替方法をご紹介したいと思います。

Contact Form 7でメール送信後に任意のページにリダイレクトさせる方法

適用しているテーマのfunctions.phpに、以下のようなコードを追加します。

function wpcf_thanks_redirect() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location.replace('<?php echo esc_url(home_url('/thanks')); ?>');
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'wpcf_thanks_redirect' );

もしくは以下のように記述してもOKです。

function wpcf_thanks_redirect() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = '<?php echo esc_url(home_url('/thanks')); ?>';
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'wpcf_thanks_redirect' );

上記のように記述すると、「http://自サイトのドメイン名/thanks」にリダイレクトされます。

フォーム毎にリダイレクト先を設定する

上記のままだとすべてのフォームが/thanksにリダイレクトされますので、複数のフォームが存在していて、フォーム毎にリダイレクト先を指定したい場合は、以下のように記述します。

function wpcf_thanks_redirect() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  if ( '1234' == event.detail.contactFormId ) {
    location.replace('<?php echo esc_url(home_url('/thanks')); ?>');
  }
  if ( '5678' == event.detail.contactFormId ) {
    location.replace('<?php echo esc_url(home_url('/second-thanks')); ?>');
  }
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'wpcf_thanks_redirect' );

もしくは以下のようにします。

function wpcf_thanks_redirect() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  if ( '1234' == event.detail.contactFormId ) {
    location = '<?php echo esc_url(home_url('/thanks')); ?>';
  }
  if ( '5678' == event.detail.contactFormId ) {
    location = '<?php echo esc_url(home_url('/second-thanks')); ?>';
  }
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'wpcf_thanks_redirect' );

「1234」や「5678」の部分でフォームのIDを指定します。フォームのIDは、ショートコード内の”id”から確認できます。

フォームのID確認

このように、フォームのIDを指定して、フォーム毎にリダイレクト先を適用することも可能です。

フォームを設置しているページでのみスクリプトを読み込む

上述した方法だと全ページでリダイレクト用のスクリプトが読み込まれます。条件分岐を使ってフォームが設置されているページでのみ読み込むようにすることも可能です。

function wpcf_thanks_redirect() {
  if( is_page('contact') || is_page('contact-second') ) {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  if ( '1234' == event.detail.contactFormId ) {
    location.replace('<?php echo esc_url(home_url('/thanks')); ?>');
  }
  if ( '5678' == event.detail.contactFormId ) {
    location.replace('<?php echo esc_url(home_url('/second-thanks')); ?>');
  }
}, false );
</script>
<?php
  }
}
add_action( 'wp_footer', 'wpcf_thanks_redirect' );

例によって以下のようにしてもOKです。

function wpcf_thanks_redirect() {
  if( is_page('contact') || is_page('contact-second') ) {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  if ( '1234' == event.detail.contactFormId ) {
    location = '<?php echo esc_url(home_url('/thanks')); ?>';
  }
  if ( '5678' == event.detail.contactFormId ) {
    location = '<?php echo esc_url(home_url('/second-thanks')); ?>';
  }
}, false );
</script>
<?php
  }
}
add_action( 'wp_footer', 'wpcf_thanks_redirect' );

「is_page(‘contact’) || is_page(‘contact-second’)」の部分でページのスラッグを指定します。上記の場合、/contactと/contact-secondでのみリダイレクト用のスクリプトが出力されます。

on_sent_okの記述は削除しましょう

上記コードを追加したら、「その他の設定」に入れていたon_sent_okの記述を削除してください。

参考:on_sent_ok は廃止されます

あとがき

functions.phpを触る必要がありちょっと面倒になりましたが、on_sent_okが廃止されるので仕方ないですね。

Contact Form 7 Controlsというプラグインを使うと、リダイレクト設定が管理画面上からできるようになりますので、テーマファイルを触りたくないという場合は、プラグインの使用をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です