ContactForm7でフォームのバリデーション時にエラー部分までスクロールする方法

ContactForm7で「入力内容に問題があります」と表示されて入力内容を修正するときに、修正が必要な個所までスクロールする方法です。
なぜ今までやろうと思わなかったのか謎ですが、バリデーションするならば間違っていた箇所までスクロールしないと面倒ですよね。
2021年6月更新
知らないうちに動かなくなっていたのでコードを修正しました。
</head>
の直前に以下のコードを追加します。footer.phpの</body>
の直前でも動作します。※動作確認してみてください。<!-- ContactForm7のバリデーションの位置にスクロールする -->
<?php if(is_page(array(1111,1112,1113))){ // array(フォームがあるページid,同じく,同じく)のときに読み込む ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7invalid', function( event ) {
setTimeout(function(){
var position = $('span.wpcf7-not-valid-tip:first').get(0).offsetTop;
$('html,body').animate({
scrollTop: position
}, 500);
},2000);
}, false );
</script>
<?php } ?>
</head>
is_page(array(
フォームがあるページのid,でContactForm7を使用しているページでのみ読み込むjQueryコードです。
addEventListener
でContactForm7がバリデーションをするときのJavaScriptの動作に、動きを追加します。
.wpcf7-not-valid-tipはContactForm7が出力するバリデーション(メールアドレスの形式が正しくありません。など)メッセージのクラス名です。
そのままだとContactFrom7がエラー箇所に.wpcf7-not-valid-tipのクラスを付与する前に働いてしまい要素が取得できないので、setTimeoutでスクロールさせるコードを囲って2000ミリ秒送らせてスクロールさせます。「入力内容に問題があります」という警告文字を見せてからスクロールできるのでむしろ良いかも。秒数はお好みで調整してください。
:first
と付けることで、一番最初のエラー位置を指定しています。
500
はスクロールスピードです。
これでバリデーションエラーが出た際に、エラー位置まで自動的にスクロールしてユーザーに修正を促せるようになりました。