on_sent_ok廃止によるContactForm7サンクスページ変更方法

2018年2月8日2023年9月23日

on_sent_ok と on_submit はContactForm7 5.0から廃止になりました。以前はContactForm7の「その他の設定」に以下を記述しておけばサンクスページへ移動してくれました。

functions.phpにコードの追加

ContactForm7 5.0 からon_sent_ok と on_submit は利用できないのでContactForm7のカスタムDOMイベントによる方法で対応します。

wp-content\themes\テーマ\functions.php

例1）locationに飛ばし先のURL設定

functions.phpの末尾に次のコードを追加します。

add_action( 'wp_footer', 'mycustom_wp_footer' );
  
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://サイトドメイン/contact/thanks';
}, false );
</script>
<?php
}

7行目のlocationのところに飛ばし先のURLを設定します。

ContactForm7のコンタクトフォームより

「その他の設定」タブから「on_sent_ok」の行を削除し、コンタクトフォームの保存を行います。

これで完了です。

例2）location.replaceでブラウザの[戻る]ボタンを利用できないようにする方法

location.replaceはページを移動すると履歴が残らないため、ブラウザの「戻る」ボタンで前のページに戻ることができなくなります。

functions.phpの末尾に次のコードを追加します。

add_action( 'wp_footer', 'mycustom_wp_footer' );
  
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location.replace(‘https://サイトドメイン/contact/thanks’);
}, false );
</script>
<?php
}

7行目のlocation.replaceのところに飛ばし先のURLを設定します。

ContactForm7のコンタクトフォームより

「その他の設定」タブから「on_sent_ok」の行を削除し、コンタクトフォームの保存を行います。

これで完了です。

例3）【複数対応】特定のコンタクトフォームのみ実行する方法

特定のコンタクトフォームのみ対応したい場合、IDを設定してサンクスページへ飛ばすことができます。

functions.phpの末尾に次のコードを追加します。

add_action( 'wp_footer', 'mycustom_wp_footer' );
  
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '12' == event.detail.contactFormId ) {
        location = 'https://サイトドメイン/contact/thanks';
    }
}, false );
</script>
<?php
}

コンタクトフォームにできるショートコードのidをif文のところに設定します。
あとは、同じくlocationのところに飛ばし先のURLを設定します。