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

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

お問い合わせフォーム作成プラグイン「Contact Form 7」で「on_sent_ok」が廃止されるみたいなので、対処法をご紹介します。

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

「on_sent_ok」と「on_submit」は2017年中に廃止される予定だから使わないでね。代わりの設定があるからそっちでやってねってことみたい。



目次

対処法

代わりにDOMイベントの操作方法が記述されていたので、そちらで対応。
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
}

//ここまで

?>



参照:
その他の設定 | Contact Form 7 [日本語]
DOM イベント | Contact Form 7 [日本語]
on_sent_ok は廃止されます | Contact Form 7 [日本語]