動かない!?ContactForm7にて完了ページに飛ばない時の対処法

先日、ContactForm7にてメール送信後、完了ページに遷移するという設定をしておりました。

実装したコードはJSを記事内に書き込むシンプルなもの

下記のコードをContactForm7を読み込んだ記事ページに貼り付けます。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://送信完了画面のURL';
}, false );
</script>

後は「https://送信完了画面のURL」の部分を変更するだけで送信完了ページに遷移するという簡単なものです。

ちなみに、設置方法はHACK NOTEさんの記事を参照。ありがとうございます！。

WordPress : ContactForm7に送信完了ページを作る

やってみてたが、どうしても完了ページへの遷移がしない。なぜ？

結論：ContactForm7ではなく単なるJavascriptの読み込みの失敗

結論を言いますと…単純に他のJavascriptが読み込みに失敗していただけでした。

header.php上で同じjsファイルを二回読み込んだ事でjsがエラーを起こしてただけですので、contactform7の設定とは全く関係なかったわけです。

Javascriptのエラーが何故読み込み失敗につながるのか。

ContactForm7では、送信ボタンの挙動をjavascriptにて制御しています。

今回加えたjsでは、この処理のイベントに完了ページに飛ばす動作を加えています。

もしもこのjsがエラーで読み込まれなかった場合、割り込むべきイベントが存在しなくなります。

気づいたきっかけも、ContactForm7の挙動のおかしさ

ContactForm7は送信ボタンを押すとページ遷移はせず、そこにダイアログが出るのが通常の挙動です。

それなのに、送信ボタンを押した後、同じページを再読み込みしてるんですよね。

なので、送信ボタンを押した後がおかしいと思い、調べはじめたのがきっかけです。

必ずデバッグを見よう

案の定、GoogleChormeのデバッガーではJSのエラー報告が出ていまして、それを解決したら動くようになりました。

今更ですが、最初からデバッガーを見ておくべきでしたね…。

ContactForm7の設定が悪いと疑ってかかる前に全体から見ていくべきだったかなと思います。

デバッガーについて知りたい方は別ページを参考に。

【JavaScript入門】デバッグの方法とChrome開発者ツールの使い方まとめ！