【MW WP Form】入力エラー時にフォームトップまで自動スクロールさせる方法【備忘録】

こんにちは、ワタナベです。

今回はMW WP Formで送信ボタンを押した際、エラーがあった場合にフォームトップまで自動スクロールで戻す方法の備忘録です。

<script>
jQuery(function($) {
if ( $(‘.error’)[0] ) {
$(‘.mw_wp_form’).addClass(‘mw_wp_form_error’);
var errorEl = $(‘.mw_wp_form’).eq(0);
var position = errorEl.parent().offset().top – 100;
$(‘body,html’).delay(200).animate({scrollTop:position}, 600, ‘swing’);
}
});
</script>

↑のコードで簡単に実装できます。
「.mw_wp_form」部分を任意のクラスにすると、そのクラスが設定されている要素に自動スクロールされるようにすることもできます。

位置の調整は下記

var position = errorEl.parent().offset().top – 100;

スクロール発火までの時間、スクロールスピードは下記

$(‘body,html’).delay(200).animate({scrollTop:position}, 600, ‘swing’);

にて調整することができます。

何も設定していないとページトップに戻されますが、ページトップからフォームまで距離がある場合、フォーム部分までまたスクロールして戻らないといけないので、自動でスクロールされるよう設定してユーザビリティを向上させましょう！

▼THANKS！

 Masa-Traveller | 旅×Web制作＝本当に縛られ...

【MW WP Form】入力エラー時にフォームまで自動スクロールで戻る方法 | Masa-Trave...

https://masa-traveller.site/mw-wp-form-error-scroll/

WordPressでサイト制作をする際、かなりの確率でお問い合わせフォームを実装することになるかと思います。

それではまた次回。
ご閲覧ありがとうございました(^^♪