Contact Form 7のエラー時に該当箇所へスクロールさせる方法

Posted on by

Contact Form 7を使用していると、エラーが発生した際にフォームの
該当箇所へ自動でスクロールさせたい場面があります。
本記事では、jQueryを使ってエラーが発生したときに適切にスクロールする方法を紹介します。

問題点

以下のコードでは、エラーが発生した際に
.wpcf7-not-valid:first の要素までスクロールしようとしていますが、いくつか問題があります。

jQuery(function ($) {
  var wpcf7El = document.querySelector(".wpcf7");

  wpcf7El.addEventListener("wpcf7invalid", function() {
    var speed = 1000; // スクロール速度
    setTimeout(function () {
      var firstErrorEl = $(".wpcf7-not-valid:first");
      var scrollAmount = firstErrorEl.offset().top;
      $("html, body").animate({ scrollTop: scrollAmount }, speed, "swing");
    }, 500);
  }, false);
});

このコードの問題点

  1. wpcf7El.addEventListener() でイベントを追加しているが、wpcf7El はネイティブの querySelector() で取得しているため、内部で jQuery ($()) を使用する際に注意が必要。
  2. $(".wpcf7-not-valid:first") が適切に動作しない可能性がある。
  3. setTimeout を 500ms にしているが、エラーが表示されるタイミングによって .wpcf7-not-valid が適用される前に処理が実行される可能性がある。

解決策：適切にスクロールする方法

以下のコードに修正することで、エラーが発生した最初の要素へ正しくスクロールすることができます。

jQuery(function ($) {
  var wpcf7El = document.querySelector(".wpcf7");

  if (wpcf7El) {
    wpcf7El.addEventListener("wpcf7invalid", function () {
      setTimeout(function () {
        var firstErrorEl = $(".wpcf7-not-valid").first();
        if (firstErrorEl.length) {
          var scrollAmount = firstErrorEl.offset().top - 20; // スクロール位置を少し調整
          $("html, body").animate({ scrollTop: scrollAmount }, 800, "swing");
        }
      }, 600); // エラー表示後の処理タイミングを調整
    }, false);
  }
});

修正ポイント

.wpcf7-not-valid:first の取得方法を修正
→ $(".wpcf7-not-valid").first() を使用し、最初の .wpcf7-not-valid 要素を適切に取得

エラー要素が存在するかを確認
→ if (firstErrorEl.length) を追加し、該当要素がない場合は処理をスキップ

スクロール位置を調整
→ .offset().top - 20 にすることで、エラー要素が少し上にくるように補正

setTimeout を 600ms に変更
→ 500ms → 600ms に調整し、エラー表示が確実に反映されるように

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

jQuery(function ($) {
  var wpcf7El = document.querySelector(".wpcf7");

  if (wpcf7El) {
    wpcf7El.addEventListener("wpcf7invalid", function () {
      setTimeout(function () {
        var firstErrorEl = $(".wpcf7-not-valid").first();
        if (firstErrorEl.length) {
          var headerHeight = $(".fixed-header").outerHeight() || 0; // ヘッダーの高さを取得（クラス名を適宜変更）
          var scrollAmount = firstErrorEl.offset().top - headerHeight - 20; // ヘッダー分を引いて調整
          $("html, body").animate({ scrollTop: scrollAmount }, 800, "swing");
        }
      }, 600);
    }, false);
  }
});

ポイント

ヘッダーの高さを考慮

  • $(".fixed-header").outerHeight() で ヘッダーの高さを取得
  • ヘッダーの高さが 0 の場合（追従ヘッダーがない場合）でも問題なく動作

スクロール位置を調整

  • firstErrorEl.offset().top - headerHeight - 20 とすることで、ヘッダーの下に隠れないようにする
  • -20 は少し余裕を持たせるための調整

ヘッダーのクラスを適宜変更

  • 上記のコードでは .fixed-header を想定していますが、実際のヘッダーのクラス名に変更してください（例: .site-header など）

動作確認

このコードを functions.js などに記述し、Contact Form 7 のフォームをエラーが出る状態にして送信ボタンを押します。エラー発生後、自動で該当箇所までスクロールされることを確認してください。

この方法を活用することで、ユーザーがエラーをすぐに認識でき、より快適なフォーム体験を提供できます。ぜひ実装してみてください！