問い合わせフォームのエラー設計｜入力をやり直させない企業サイトのUI

入力を始める前に必要な情報を示す

問い合わせフォームの問題は、エラーが出た後だけにあるわけではありません。何を入力するのか、どこまで必須なのか、添付資料が必要なのかが分からないと、相談者は途中で手を止めます。入力欄の上や近くに、項目名と必要な説明を置きましょう。

W3Cのフォームガイドは、ラベルや入力条件を分かるように示すことを扱っています。入力すると消えるプレースホルダーだけに頼らず、必須の表示も意味が伝わる形にします。担当部署の都合だけで必須項目を増やさず、最初の回答に何が必要かを営業担当者と整理します。

実際の名前と連絡先を受け入れる

日本語の会社名には、長い名称、記号、英数字、支店名などが含まれます。ふりがなを必要とするなら、その理由と入力形式を明確にします。海外からも問い合わせを受ける場合は、国内の郵便番号や電話番号の形だけを前提にしないようにします。

形式を厳しく制限する前に、どのような入力なら担当者が連絡できるかを考えます。例えば電話番号のハイフンを受け入れられるなら、相談者に修正を繰り返させる必要はありません。実装側で調整する場合も、入力した内容を予告なく別の意味へ変えないことが大切です。

エラーは場所と直し方を伝える

「入力内容に誤りがあります」という一文だけでは、どこを直せばよいか分かりません。問題の項目の近くに、何が不足しているか、どの形式なら受け付けられるかを具体的に示します。色の変化だけでなく、読める説明を添えます。

複数の項目があるフォームでは、画面の上部にエラーの一覧を置き、該当項目へ移動できると確認しやすくなります。キーボードだけの操作や読み上げでも、通知と項目の関係が分かるかを確認してください。エラーを出すタイミングも、入力途中の不要な警告を増やさないように検討します。

送信に失敗しても入力内容を残す

入力の誤りと、通信や受付処理の失敗は別の問題です。サーバーの問題なのに入力欄を赤くすると、相談者は正しい内容を何度も書き直すことになります。受付できたかどうかを正確に伝え、再試行できる状態と連絡の代替手段を用意しましょう。

送信中は状態を表示し、重複送信を防ぐ処理と、失敗したときに再操作できる状態を両立させます。長い相談文や添付前の説明を失わないかも確認します。具体的な保持方法はフォームの仕組みによりますが、「もう一度全部入力する」ことを当然の動作にしないようにします。

受付完了から社内の受信まで検証する

完了画面では、受け付けたことと次の流れを伝えます。実際に守れる体制がないのに「必ず当日返信」と書いてはいけません。営業時間や確認に必要な条件があるなら、現実の運用に合わせて案内します。

確認では、未入力、不正なメール形式、長い会社名、通信失敗、二重クリック、正常送信を試します。スマートフォンのキーボード表示中も操作し、最後に社内の受信先で内容を確認します。ボタンのクリック数、受付成功、対応可能な相談件数は異なるため、計測の名前も区別しましょう。

実務チェックリスト

• ラベル、必須項目、入力条件を事前に示す。
• 実際の会社名と連絡先で試す。
• エラーの場所と直し方を文字で伝える。
• 失敗時に入力内容と再試行の手段を残す。
• 正常送信、完了案内、社内受信まで確認する。