💣
【ContactForm7】バリデーションの該当箇所にスクロール
実現したいこと
ContactForm7で作成したフォームでバリデーションによるエラーが発生した際に、エラー部分の位置にスクロールさせたい。
コード
document.addEventListener('wpcf7invalid', function (event) {
setTimeout(function () {
var position = $('span.wpcf7-not-valid-tip:first').get(0).offsetTop;
$('html,body').animate({
scrollTop: position
}, 500);
}, 1000);
}, false);
setTimeoutを使っているのは、デフォルトで「入力内容に問題がある」旨の表示が出るためです。
そちらをユーザーに確認してもらってからdelayさせた後にスクロールします。（引数を変えればタイミングも制御できます）
参考
Discussion