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

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

cotactform7
Contact Form 7 にサンクスページを作ってみる
Contact Form 7 にサンクスページを作ってみる

functions.phpにコードの追加

ContactForm7 5.0 からon_sent_okon_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 = 'http://サイトドメイン/contact/thanks';
}, false );
</script>
<?php
}

7行目のlocationのところに飛ばし先のURLを設定します。
「その他の設定」から「on_sent_ok」の行を削除し、コンタクトフォームの保存を行います。

これで完了です。

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

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

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

7行目のlocation.replaceのところに飛ばし先のURLを設定します。
「その他の設定」から「on_sent_ok」の行を削除し、コンタクトフォームの保存を行います。

これで完了です。

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

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

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

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 = 'http://サイトドメイン/contact/thanks';
    }
}, false );
</script>
<?php
}

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

こちらで完了になります。

参考サイト

on_sent_ok は廃止されます
DOM イベント

関連記事