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

2022年2月28日2022年4月11日

WordPressプラグイン「Contact Form 7」では、必須項目が未入力の場合や、入力値が正しくない場合にエラーメッセージを表示してくれます。

しかし、フォームの項目が多い場合は、エラー箇所に自動的にスクロールしてくれる機能が欲しいですよね。

今回の記事では、このエラー箇所までスクロールする機能をjQueryで実装する方法を紹介します！

コピペ用実装コードの紹介やコードの解説をしていきますので、ぜひ参考にしてみてください。

【コピペ用】Contact Form 7でエラー箇所にスクロールする実装コード

ここでは、追従ヘッダーがある場合・ない場合の2通りのコードを用意しました。

以下のjQueryのコードをコピーして、フォームを表示するページにペーストしてください。

追従するヘッダーがない場合

まずは通常のバージョンです。

エラーが発生した場合に、一番最初のエラー箇所までスクロールします。

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; // 要素までのスクロール距離を取得
      $("html, body").animate({ scrollTop: scrollAmount }, speed, "swing"); // 該当箇所までスクロール
    }, 500);
  },false );
});

追従するヘッダーがある場合

続いては追従するヘッダーがある場合のコードです。

1番最初のエラー箇所からヘッダーの高さを引いた地点までスクロールします。

position: fixedやstickyでヘッダーを上部に固定している場合は、こちらのコードをお使いください。

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

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