「MW WP Form」で入力エラーのときにフォームの位置までスクロール

WordPressプラグインとして有名な「MW WP Form」。確認画面付きのお問い合わせフォームを作成することができる便利なプラグインです。

MW WP Form

私もWordPressサイト制作のときに、よく利用させていただいています。

入力エラー時にフォームまでスクロール

お問い合わせページにフォームだけ設置されている場合は問題ないのですが、最近ページ内コンテンツの最後にフォームをつけて欲しいといわれることが増えました。

ショートコードで好きな場所にフォームを設置できるので、設置するだけなら問題ないのですが、入力エラーを検知したときに問題が起きます。

というのも、入力エラー（例えば電話番号なのに数字じゃないとか）のときにページの先頭に戻って表示されてしまい、なにが起きたのかわからなくなります。

またフォームのところまでスクロールすると、入力エラーというのがわかるのですが、あまりにも不親切。

入力エラーが出た場合、フォームのところまで自動的にスクロールさせるとすぐに入力エラーだと気づいてもらえそうです。

入力エラーのときに、フォームの位置までスクロールさせるスクリプトがこちら。

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

 }

 });

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

}

});

ちなみに、スクロールとは関係ないのですが、

$('.mw_wp_form').addClass('mw_wp_form_error');<br>

1	$('.mw_wp_form').addClass('mw_wp_form_error');<br>

で、mw_wp_form_errorというクラス名を付与しています。

もし、お問い合わせフォームの見出しのところまでスクロールさせたければ、

var position = errorEl.parent().offset().top - 100;<br>

1	var position = errorEl.parent().offset().top - 100;<br>

のtop – 100;の値を調整すればいいでしょう。

illustration by Ouch.pics