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

投稿詳細ページに同一のカテゴリー一覧を表示する方法【簡単】

更新日:2019.11.28
2220
WordPress プログラミング

【簡単】WordPressでテーマ内のファイルURLを取得する方法

2022.04.13
1587
WordPress プログラミング

WordPressでサイドバーにある投稿の名称を変更する方法

2022.04.23
1370
WordPress プログラミング

ワードプレスの管理画面をアクセス制限(IP制限)してセキュリティを強化しよう

2021.03.01
2226