【jQuery】Contact Form 7でエラー箇所に自動でスクロールする方法

皆さん、こんにちは。

制作部の関です。

今回は「【jQuery】Contact Form 7でエラー箇所に自動でスクロールする方法」についてです。

【jQuery】Contact Form 7でエラー箇所に自動でスクロールする方法

<script>
jQuery(function ($) {
  // Contact Form 7
  var wpcf7El = document.querySelector(".wpcf7")

  // エラーが発生した時
  wpcf7El.addEventListener("wpcf7invalid", function() {
    var speed = 1000; // スクロール速度
    setTimeout(function () {
      var firstErrorEl = $(".wpcf7-not-valid:first"); // エラーが発生した1番目の要素を取得
      var scrollAmount = firstErrorEl.offset().top - 100; // 要素までのスクロール距離を取得
      $("html, body").animate({ scrollTop: scrollAmount }, speed, "swing"); // 該当箇所までスクロール
    }, 500);
  },false );
});
</script>



これだといいUXになりますね。

エラー箇所に遷移するので、エンドユーザーも楽になりますね。

そのままコピペで使えるので試してみてください！

以上、制作部の関でした。