【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変数内のセレクタに固定ヘッダー要素を指定しましょう。
以上で固定ヘッダー分の高さも考慮し該当箇所までスクロールしてくます。
以上の方法で実装完了です。
まとめ
エラー箇所までスクロールする仕様に変更することで、ページの離脱率を下げコンバージョンを上げる事につながるかもしれません。
参考にしてみてください。
以上で解説を終わります。
目次
