💣

【ContactForm7】バリデーションの該当箇所にスクロール

2022/05/25に公開約500字

実現したいこと

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させた後にスクロールします。(引数を変えればタイミングも制御できます)

参考

https://developer.mozilla.org/ja/docs/Web/API/setTimeout
GitHubで編集を提案

Discussion

ログインするとコメントできます