問い合わせフォームで送信ボタンを押すと「入力内容に誤りがあります」とだけ表示される。どこを直せばよいか分からず、入力欄を上から探し直すことになります。エラーになった欄の名前、受け付けられなかった理由、直し方を文字で示し、入力済みの内容を残したまま再送できるかを確認します。
まず、どの操作で止まるかを一件ずつ試す
フォームの改修前に、実際の画面で架空のテスト入力を使って確認します。必須欄を空にする、メールアドレスの形式を誤る、文字数を超えるなど、フォームにある条件ごとに送信します。エラー後に表示された場所、画面が移動した先、残った入力内容を記録します。問題が一欄だけのときと、複数欄にあるときの両方を試します。
ここで分けたいのは、入力内容を受け付けなかった状態と、入力は正しいのに通信やシステムの問題で送れなかった状態です。後者を「メールアドレスを確認してください」と案内しても、利用者は直せません。送信失敗の画面は別の原因として扱い、フォームの入力エラーと混ぜないようにします。
W3Cの入力エラー識別の解説は、自動でエラーを検出したら、対象の項目と何が間違っているかを文字で伝えることを説明しています。赤い枠を付けるだけでは、どの欄に何が必要か十分に分かりません。色を手掛かりにしても、欄名と説明は読める形で残します。
欄のそばと画面全体で、同じエラーを探せるようにする
一つの欄に誤りがあるなら、その欄のラベルの近くへ説明を置きます。例えば「メールアドレスを入力してください」「メールアドレスの形式を確認してください」のように、空欄と形式違いで文章を変えます。単に「不正な値です」とするより、利用者が次にする操作を示せます。必須欄や形式の条件は、入力する前にも分かるようにします。
長いフォームで複数の欄が誤っているときは、送信ボタンの近くなど目に入る場所で「修正が必要な欄」をまとめて示し、各欄にも説明を置く方法があります。W3Cのフォーム通知の教材は、エラーの一覧に対象欄の名前、内容、直し方を含め、欄へ移動できるリンクを置く例を示しています。表示方法は一つに固定せず、利用者が迷わず対象の欄へ戻れるかで選びます。
スマートフォンでは、送信ボタンと最初のエラー欄が離れて見えることがあります。エラー後に画面が先頭へ戻るだけでなく、何件のどの欄を直すかが分かるか。拡大表示やキーボードで移動する場合にも、説明が欄と結び付いているかを試します。必要なら、見た目だけでなく読み上げでもエラーが伝わる実装を確認します。
直した後に、入力内容を失わず送れるか
エラー表示が親切でも、ほかの欄へ入力した会社名や相談内容が消えるなら、最初から書き直す必要が生じます。誤った欄を直した後、入力済みの値や選択肢が保たれ、確認画面へ進めるかを一連の操作で確かめます。エラーのたびに別の入力欄が空にならないかも見ます。
テストでは、長めの相談文を入れ、別の必須欄を空にして送信します。戻った画面で相談文と添付状態がどう扱われるかを確認します。添付ファイルは安全上の理由などで再選択が必要な場合もあるため、そのときは失われたことと、もう一度選ぶ方法を画面で伝えます。「入力済み内容をすべて必ず保持」と決めつけず、利用しているフォームで実際の動きを確かめます。
改修を頼むときは、再現した画面と操作を伝える
「フォームのエラーが分かりにくい」だけで依頼せず、どのページで、どの欄をどう入力して、送信後に何が表示されたかを制作会社へ伝えます。画面の写真には実際の顧客情報を写さず、テスト用の内容を使います。エラーの文言、表示位置、入力保持、再送結果を一緒に見れば、文章の修正で足りるか、フォームの動きまで直すかを分けて相談できます。
公開前は、パソコンとスマートフォンで空欄、形式違い、複数エラーを試し、修正後に正常送信できるかまで確認します。担当者への通知や自動返信が届くかも、テスト用の宛先で確かめます。エラーを減らすために必須条件を外す場合は、受け取る側が必要な情報を得られるかも見直します。
Bämの問い合わせ改善のご相談では、訪問から説明、連絡方法まで確認して改善範囲を考えます。フォームの入力エラーが原因と思われる場合は、再現した操作と画面を共有し、表示文と送信動作のどこを直すか相談できます。問い合わせ数の増加を約束するのではなく、送れる状態までのつまずきを確認します。
参考資料
資料確認日：2026年9月26日。本文はフォームの入力エラーから復帰できるかを確認する方法です。個別フォームの設定やアクセシビリティ適合を判定したものではありません。
