WordPressでサイト制作をする際、かなりの確率でお問い合わせフォームを実装することになるかと思います。
MW WP Formは保守中の既存サイト向けとして利用し、導入前にWordPress公式ディレクトリで最新の対応状況を確認してください。新規サイトでは、継続的に更新されているフォームプラグインも比較することをおすすめします。
恐らく、「MW WP Form」か「Contact Form 7」のどちらかのプラグインを使用するのではないでしょうか。
なお、お問い合わせフォームを実装する際、以下の2点だけで済ませていませんか？
- デザインカンプどおりのお問い合わせフォームをコーディングで再現する
- お問い合わせフォームがキチンと動作するか確認する
ユーザーの離脱を防ぎ、コンバージョンを上げてクライアントに満足してもらうために、そこで終わらせずに、もっと便利なお問い合わせフォームにしましょう！
その方法として、「入力エラー時にフォームまで自動スクロールで戻る方法」をご紹介します！
MW WP Formで、ユーザーにとって便利になる方法を、別の記事でも紹介しているので、こちらも合わせて対応することをオススメします！
本記事の執筆者：マサトラ
フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。
動作検証時、わざと入力エラーを発生させて確認していますか？
WordPressでMW WP Formを導入するとき、キチンとお問い合わせフォームからメールが送信されるか等、動作確認を必ず行うかと思います。
その際、「正しい入力内容だけ」で動作検証していませんか？
入力内容が正しく自動返信メールに反映されるか、自動返信メールが正しい送信先に届くか、だけではなく、「わざと入力ミスをして」動作を確認することも非常に大事です。
入力エラーは起こりうることなのですが、その際に元のお問い合わせフォームの位置まで画面が戻ってくれないと、ユーザーはどこを入力ミスしたか分からず、再入力が面倒になってサイトから離脱してしまう可能性があります。
そうなるとコンバージョンを目的としたお問い合わせフォームの意味が無くなってしまいます。
ユーザー目線に立つ＝クライアントのため、ということになりますし、細かい部分まで配慮できるコーダーとして価値アップに繋がりますよね。
ユーザーのため、クライアントのため、そしてコーダーである自分のために、入力エラー時のスクロール実装に取り組みましょう！
やり方
入力エラー時にフォームまで自動スクロールで戻るようにするには、特定のコードをJSファイルに記述するだけです。
順を追って説明していきますね。
MW WP Formの入力エラー箇所にスクロールする記述
コードは以下のとおりです。テーマまたはプラグインが読み込むJavaScriptファイルへ追加し、実機でも動作を確認してください。
document.addEventListener('DOMContentLoaded', () => {
const firstError = document.querySelector('.mw_wp_form .error');
if (!firstError) return;
const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
firstError.scrollIntoView({
behavior: reduceMotion ? 'auto' : 'smooth',
block: 'center'
});
});コードの解説
MW WP Formで出力されるHTMLを確認してみると、フォーム全体を囲う要素に「mw_wp_form」というクラス名が付与されています。
.mw_wp_form .errorで最初のエラー表示を取得し、scrollIntoView()で画面中央へ移動します。エラーがなければ何も実行しません。
利用者がOSで視差効果を減らす設定にしている場合は、滑らかなアニメーションを使わず即座に移動します。固定ヘッダーと重なる場合は、エラー要素へCSSのscroll-margin-topを指定してください。
まとめ
入力エラー時は最初のエラー位置まで戻すことで、利用者が修正箇所を見つけやすくなります。キーボード操作や画面読み上げでも問題がないか、実際のフォームで確認しましょう。
JSにちょっと記述を加えるだけで、ユーザーにとって使いやすく、クライアントにとってユーザーの離脱が減り、コーダーにとって評価されやすいお問い合わせフォームになるので、ぜひ実践してみてください。
また、他にもMW WP Formでユーザーのためになる記事を書いているので、こちらも合わせてご覧ください。
