以前、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を指定して、フォーム毎にリダイレクト先を適用することも可能です。
フォームを設置しているページでのみスクリプトを読み込む
上述した方法だと全ページでリダイレクト用のスクリプトが読み込まれます。条件分岐を使ってフォームが設置されているページでのみ読み込むようにすることも可能です。
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の記述を削除してください。
あとがき
functions.phpを触る必要がありちょっと面倒になりましたが、on_sent_okが廃止されるので仕方ないですね。
Contact Form 7 Controlsというプラグインを使うと、リダイレクト設定が管理画面上からできるようになりますので、テーマファイルを触りたくないという場合は、プラグインの使用をご検討ください。