WordPress

【Wordpress】Contact Form 7で「on_sent_ok」が使えない時の対処法

More than 1 year has passed since last update.

いつもの様に「Contact Form 7」を使用して、「その他の設定」から「on_sent_ok」を使って完了ページへ遷移させる記述を書いたら、怒られた。

999.png

「on_sent_ok」と「on_submit」は2017年中に廃止される予定だから使わないでね。代わりの設定があるからそっちでやってねってことみたい。
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/
https://contactform7.com/ja/additional-settings/#javascript

対処法

代わりにDOMイベントの操作方法が記述されていたので、そちらで対応。
https://contactform7.com/ja/dom-events/
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/

functions.php
<?php

//ここから
add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
   location.replace('遷移先のURL');
}, false );
</script>
<?php
}
//ここまで

?>

wp_footerにアクションをかけて、DOMイベントが発生したら遷移先のURLに書き換えるって感じで対応しました。

ただ、これだとお問い合わせページ以外でもjsが走っちゃうので、formタグに出力されるclassが存在するか判定の処理を追加して対応。

functions.php
<?php

//ここから
add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
  if(jQuery('.wpcf7').length){ //formのclassが存在するか判定
    var wpcf7Elm = document.querySelector( '.wpcf7' );
    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
     location.replace('遷移先のURL');
   }, false );
  }
</script>
<?php
}

//ここまで

?>

これでgaのイベントトラッキングも対応できるみたい。

DOMイベントのタイミングは以下を参照

https://contactform7.com/ja/dom-events/