スポンサーリンク

Contact form 7 送信ボタン押したときにjavascriptを動かしたいのに動かない

Contact form 7 送信ボタン押したときをtriggerにして、javascriptを動かしたいのに動かなかった件。
えらい時間食ったぜ。

やりたかったこと。
送信ボタンを押してエラーがあったら、ページTOPに自動スクロールさせる、っていうだけのこと。
これがぜんぜんできない。
「triggerが用意されているので…」なんていうページは散見できるのだけれど、どうやってもできない。
↓こういうのが典型。(けっして悪いっていう意味じゃありません。)
https://qiita.com/uto-usui/items/a5797e011970b938ed2a

たぶん古いやり方になっちまったんだろうね。
結論から言うと、答えはこの公式ページにあった。
https://contactform7.com/ja/dom-events/

document.addEventListener( 'wpcf7invalid', function( event ) {
var position = $('form.wpcf7-form').offset().top;//ここはエラーが出た最上段を指定するとかでもいいよね。
$('html, body').animate({
scrollTop: position
}, 700);
}, false );

これで動いた。
うぃー、しびれたよ。
あとで思えば、こういったページには
https://qiita.com/konweb/items/876bf71fbba3b86bcda3
/wp-content/plugins/contact-form-7/includes/js/scripts.js には、↓こういうtriggerがあるよ、

$(data.into).trigger('wpcf7:invalid');

って書いてある。
どこで発火しているのか調べてみたけど、なんか静かだったな。どうなってるんだろ。

他にも、調べているうちにいろんな原因で動かせない場合があるようだね。
・wp_header(); wp_footer();が記述されていない。
・HTMLのマークアップが壊れている
とかね。

がんばってみてくれ!

Contact form 7はたしかに簡単にフォームが作れるところが優秀なんだけれども、やっぱり確認画面だとか普通に出ていいと思うよ。JSだらけで余計なDOMありすぎ、っていうね。送信完了で出てくるUIも微妙。送れたことがしっかりわかればAjaxでもなんでもいいんだよな。

スポンサーリンク