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

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

恐らく、「MW WP Form」か「Contact Form 7」のどちらかのプラグインを使用するのではないでしょうか。

なお、お問い合わせフォームを実装する際、以下の2点だけで済ませていませんか？

• デザインカンプどおりのお問い合わせフォームをコーディングで再現する
• お問い合わせフォームがキチンと動作するか確認する

ユーザーの離脱を防ぎ、コンバージョンを上げてクライアントに満足してもらうために、そこで終わらせずに、もっと便利なお問い合わせフォームにしましょう！

その方法として、「入力エラー時にフォームまで自動スクロールで戻る方法」をご紹介します！

MW WP Formで、ユーザーにとって便利になる方法を、別の記事でも紹介しているので、こちらも合わせて対応することをオススメします！

WordPressでMW WP Formを導入するとき、キチンとお問い合わせフォームからメールが送信されるか等、動作確認を必ず行うかと思います。

その際、「正しい入力内容だけ」で動作検証していませんか？

入力内容が正しく自動返信メールに反映されるか、自動返信メールが正しい送信先に届くか、だけではなく、「わざと入力ミスをして」動作を確認することも非常に大事です。

入力エラーは起こりうることなのですが、その際に元のお問い合わせフォームの位置まで画面が戻ってくれないと、ユーザーはどこを入力ミスしたか分からず、再入力が面倒になってサイトから離脱してしまう可能性があります。

そうなるとコンバージョンを目的としたお問い合わせフォームの意味が無くなってしまいます。

ユーザー目線に立つ＝クライアントのため、ということになりますし、細かい部分まで配慮できるコーダーとして価値アップに繋がりますよね。

ユーザーのため、クライアントのため、そしてコーダーである自分のために、入力エラー時のスクロール実装に取り組みましょう！

入力エラー時にフォームまで自動スクロールで戻るようにするには、特定のコードをJSファイルに記述するだけです。

順を追って説明していきますね。

コードは以下のとおりです。急いでいる人は次の解説をすっ飛ばして、このままコピペしてご利用ください。

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で出力されるHTMLを確認してみると、フォーム全体を囲う要素に「mw_wp_form」というクラス名が付与されています。

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

入力エラーが発生した時、「mw_wp_form」の親要素を取得し、その親要素のトップ位置から「-100px」移動する、という記述になります。

お問い合わせフォームのすぐ上にセクションタイトルがあったりすると思うので、必要に応じて移動する距離(-100pxの部分)を調整してください。

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

スクロール発火までの時間をどの程度遅らせるか、スクロールのスピードについては、上記コードで調整可能です。

入力エラー時にフォームまで自動スクロールで戻る方法はコピペで完結しますし、必要に応じて数字を調整するだけなので、非常に簡単だったかと思います。

JSにちょっと記述を加えるだけで、ユーザーにとって使いやすく、クライアントにとってユーザーの離脱が減り、コーダーにとって評価されやすいお問い合わせフォームになるので、ぜひ実践してみてください。

また、他にもMW WP Formでユーザーのためになる記事を書いているので、こちらも合わせてご覧ください。