Written by Kasumi

【contact form 7】エラーを検知したらその箇所まで自動スクロールさせる方法

お問い合わせフォームにWordPressのcotanct form 7(コンタクトフォーム7)を使っている。

送信ボタンを押してエラーがあったら、そのエラー箇所まで自動スクロールされる仕様に変更したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

※jQueryを使うので事前にライブラリを読み込みましょう。

実装サンプル

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);
});

実装サンプルです。

contact form 7を実装してるページテンプレートに上記jQueryスクリプトを記述します。

最初に送信ボタン下部にでるエラーメッセージを見せた後に該当するエラー箇所までスクロールします。

エラーが複数ある時は上から順番に最初のエラーメッセージの箇所にスクロールします。

固定ヘッダーがある場合

jQuery(function ($) {
  var wpcf7El = document.querySelector(".wpcf7")
  wpcf7El.addEventListener("wpcf7invalid", function () {
    var speed = 1000;
    var header = $("固定ヘッダー要素").innerHeight(); // 固定ヘッダー・ナビの高さを取得
    setTimeout(function () {
      var firstErrorEl = $(".wpcf7-not-valid:first"); // エラーが発生した箇所の最初の要素を取得
      var scrollAmount = firstErrorEl.offset().top - header; //スクロール位置を取得
      $("html, body").animate({ scrollTop: scrollAmount }, speed, "swing"); //スムーズスクロール
    }, 500);
  }, false);
});

固定ヘッダーがある場合の実装サンプルです。

前章のコードだと、固定ヘッダーがある場合、その高さ分スクロール位置がずれてしまいます。

上記サンプルコード、header変数内のセレクタに固定ヘッダー要素を指定しましょう。

以上で固定ヘッダー分の高さも考慮し該当箇所までスクロールしてくます。

以上の方法で実装完了です。

まとめ

エラー箇所までスクロールする仕様に変更することで、ページの離脱率を下げコンバージョンを上げる事につながるかもしれません。

参考にしてみてください。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

WordPress投稿ページ内の関連・その他記事一覧で現在のページを除外する方法【wp_query】

2022.04.20
269
WordPress プログラミング

カテゴリーページパーマリンクからcategoryを削除した際のページネーション不具合を修正

更新日:2021.10.26
572
WordPress

WordPressでアーカイブページの並び順を変更する方法【一括変更】

2022.10.21
158
WordPress

【簡単】jQueryを使って、wordpressのRSSを取得し記事を表示する方法【プラグイン不要】

更新日:2022.09.09
1787