[Wordpress]Contact form 7送信後のリダイレクトが動かない

Question

Wordpressにて問い合わせフォームを実装しているWEBサイトで、
問い合わせ完了後、別のページにリダイレクトさせたいと考えています。

下記のサイトを参考に、
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/
functions.phpに以下のソースコードを書き加えたのですが、動作しません。

add_action( 'wp_footer', 'wpcf7_redirect_newsletter' );
function wpcf7_redirect_newsletter() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
	location = 'https://abc.com/contact_us_comp';
}, false );
</script>
<?php
}

addEventListenerが動いていないのかもしれませんが、
原因がわかりません。

トリガーの wpcf7mailsent を wpcf7submit などに変えても変わりありませんでした。

ちなみに、これまでは'sent_ok'をContact Form 7のAdditional Settingsに書き込んで、
正常に動作していました。

期待結果としては、問い合わせ完了後に別ページにリダイレクトする処理が書ければOKなのですが、
対策や代案をご存知の方いましたら、ご教示いただけますと幸いです。

よろしくお願いいたします。

Answer 1

ひとまず下記を確認してみてください。

• Contact Form 7のバージョンが 4.9以降
• wp_footer() がテンプレート内で実行されているか
• エラーが出ていないかデベロッパーツールで確認 ⇒ http://eng-entrance.com/javascript-display-error

Comments

[r1_1092829]

kei344様

ご回答いただきありがとうございます。

順に回答いたします。

> Contact Form 7のバージョンが 4.9以降
4.9.1でした

> wp_footer() がテンプレート内で実行されているか
scriptがHTMLのfooterに吐き出されているか、という意味でしたら、実行されていました。
(chromeの検証ツールから確認)

> エラーが出ていないかデベロッパーツールで確認 ⇒ http://eng-entrance.com/javascript-display-error
みてみたところ、JS関連のエラーは出ていませんでした。

[kei344]

location の前の行に console.log( 'test' ); を入れてデベロッパーツールでイベントを補足出来るか確認してみてください。

[r1_1092829]

kei344様

御指南ありがとうございます。

script部分を下記のように書き換え、フォーム送信してみました。
Chromeの検証ツールの「console」から確認してみたところ、やはり出力されず、他の変化もなかったです。

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
console.log( 'test' );
location = 'https://abc.com/contact_us_comp';
}, false );
</script>

[kei344]

下記を試してみてください。

document.addEventListener( 'wpcf7invalid', function( event ) {console.log('wpcf7invalid');}, false );
document.addEventListener( 'click', function( event ) {console.log('click');}, false );
document.addEventListener( 'wpcf7spam', function( event ) {console.log('wpcf7spam');}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {console.log('wpcf7mailsent');}, false );
document.addEventListener( 'wpcf7mailfailed', function( event ) {console.log('wpcf7mailfailed');}, false );
document.addEventListener( 'wpcf7submit', function( event ) {console.log('wpcf7submit');}, false );
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {console.log( "querySelector!" );}, false );

[r1_1092829]

kei344様

ありがとうございます。

functions.phpに上記コードを加筆し、
HTML内に出力されたのを確認したのち、フォーム送信を行ってみました。

が、やはりChromeのconsoleの出力に変化なく。。。

メールアドレスを送信するタイプのフォームなのですが、
バックエンド側でのデータも確認できていますし、自動リプライもちゃんと飛んでいます。

お手数ですがよろしくお願いします。

[kei344]

'click'が出力されていないという事はそのスクリプトはパース（読み込み）されていません。もしくはdocumentのイベントを消す変なスクリプトが走っている可能性はあります。

下記コードでも同じく 'test' が出ないなら前者です。
<script>console.log( 'test' );</script>

[r1_1092829]

> <script>console.log( 'test' );</script>

こちらはchromeのconsoleで出力されていました！
（同じくfunctions.phpから挿入しています）

[kei344]

<script></script> にさっきのコードを入れても同じですか？

[r1_1092829]

kei344様

footerに<script></script>で書いてみましたが、ダメでした。

[kei344]

consoleの最下部にある「>」に下記を入れてEnterキーを押して、ページのどこでもクリックをしたら'click'がでますか？
document.addEventListener( 'click', function( event ) {console.log('click');}, false );

可能であればURLも提示してください。

[r1_1092829]

kei344様

すみません、私が混乱していました。

Clickイベントはconsoleから出力されていました。

今フッターに吐き出されている<script></script>は下記です。
> console.log( 'test_1' );
> document.addEventListener( 'click', function( event ) {console.log('click_test');}, false );
> document.addEventListener( 'wpcf7invalid', function( event ) {console.log('wpcf7invalid');}, false );
> document.addEventListener( 'wpcf7spam', function( event ) {console.log('wpcf7spam');}, false );
> document.addEventListener( 'wpcf7mailsent', function( event ) {console.log('wpcf7mailsent');}, false );
> document.addEventListener( 'wpcf7mailfailed', function( event ) {console.log('wpcf7mailfailed');}, false );
> document.addEventListener( 'wpcf7submit', function( event ) {console.log('wpcf7submit');}, false );

上記のうち、下記は機能しています。
> console.log( 'test_1' );
> document.addEventListener( 'click', function( event ) {console.log('click_test');}, false );

wpcf7系が丸々動いていないという感じになります。

URLを提示するのは可能なのですが、開発環境のため、Basic認証がかかっております。

※本番環境は依然として下記の状態で動いています。
> ちなみに、これまでは'sent_ok'をContact Form 7のAdditional Settingsに書き込んで、
> 正常に動作していました。

[kei344]

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {console.log( "querySelector!" );}, false );

これは意図的に外されましたか？
あとは、検証環境があるのであれば、テーマを変えて／プラグインをContact Form 7以外を止めて、検証するくらいしか思いつきません。

[r1_1092829]

kei344様

> これは意図的に外されましたか？
はい、そうです。

> あとは、検証環境があるのであれば、テーマを変えて／プラグインをContact Form 7以外を止めて、検証するくらいしか思いつきません。
承知しました。

長々とお付き合いいただきありがとうございます。
おかげさまでどこから手をつければいいのやら、という状況から、だいぶ調査範囲が絞れました。

ご教示いただいた方法で引き続きテストしていきたいと思います。
何かわかればこちらのページに記載します。

[r1_1092829]

こちらの件、解決いたしました。

理由は不明なのですが、JSやプラグインんぼON/OFFを繰り返しながら、最終的には従来と同じく、下記のコードをフッターに挿入することで無事リダイレクトされるようになりました。

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://abc.com/contact_us_comp';
}, false );
</script>