illustration by Ouch.pics

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

MW WP Form

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

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

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

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

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

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

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

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

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

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

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

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