本文へ移動
お問い合わせ LINEで相談

フォームのエラーと送信完了画面を点検する|伝わる案内のつくり方

フォームの入力エラー箇所と送信完了を分かりやすく案内するイラスト

フォームで「入力エラーです」とだけ表示されても、どこを直せばよいか分からなければ送信を完了できません。逆に送信後に画面が変わらなければ、受け付けられたか不安になり、何度も押す場合があります。エラーと完了の案内は、見た目の付属ではなく、受付の一部として確認しましょう。

エラーは修正する場所と方法を示す

エラー文には、問題のある項目と、次に行うことを書きます。「不正な値」より、「メールアドレスを確認してください」の方が利用者は動きやすくなります。ただし具体的な形式が必要なら、その条件も入力前に伝えます。電話番号で記号を使えるかなど、仕様と説明を一致させてください。

W3Cの通知に関する資料は、送信結果の分かりやすいフィードバックを扱っています。色を赤くするだけでは、どの欄に問題があるか伝わらない場合があります。全体の案内と項目の近くの説明をどう組み合わせるか、キーボードや読み上げでも気づけるかを制作担当者と確かめましょう。

入力内容が失われないか確認する

一つの欄を間違えたとき、他の文章がすべて消えると、利用者は最初から入力し直すことになります。長い相談文を書いた後なら大きな負担です。どの項目を保持するか、安全上保持しない項目があるかを決め、実際にエラーを起こして確かめます。戻る操作と、エラーからの再入力で挙動が異なる場合もあります。

入力中の画面から確認画面へ進む構成なら、戻って修正したときの内容を確認します。必須欄、選択肢、改行、全角文字など、実際に利用される入力を試してください。テストに本物の顧客情報を使う必要はありません。仮の入力で再現できる条件を用意し、担当者間で同じ手順を共有します。

形式の確認と安全な受付を分ける

画面側の入力チェックは利用者を助けますが、サーバー側でも必要な確認を行う設計が必要です。W3Cの入力検証資料を参考に、どのタイミングで何を案内するかを確かめます。一般の担当者はコードを書く必要はありませんが、画面を変えたときに検証条件まで合っているか確認することが大切です。

形式に合っていても、実在する連絡先かどうかは別です。メールの確認入力を追加する場合も、負担に見合う理由を考えましょう。不要な厳しい条件で、正しく入力した人まで拒否しないようにします。迷惑送信への対策を導入する際も、通常の利用者が操作できるか、利用できない場合の代替が必要かを確認してください。

送信中と完了を区別して伝える

送信ボタンを押した後、処理中なのか、成功したのか、失敗したのか分かる表示を用意します。すぐに結果が出ない場合でも、利用者が連打したくなる状態を避ける工夫を担当者と検討します。ただし、表示上ボタンを無効にするだけで重複を防げるとは限りません。処理側の設計と合わせて確認が必要です。

送信完了の画面には、何を受け付けたか、次にどう案内されるかを、実際の運用に合う範囲で書きます。「必ず一時間以内に返信」など、守れない約束を置かないようにします。返信までの目安を出す場合も、休業日や内容による扱いを確かめます。利用者が控えを必要とするなら、その方法も検討してください。

完了表示と受信を別々に試す

完了画面が出ても、メールの送信や担当者の受信が成功したとは限りません。テスト送信では、受付先で受信したか、件名と本文が正しいか、返信先が意図どおりかを確認します。自動返信があるなら、相談者側に届く内容と差出人も点検してください。迷惑メールの分類や組織側の受信設定が影響する場合もあります。

試験前には、送信日時と件名を受付担当へ知らせます。個人の実データや機密資料を使わず、テストと分かる内容で行いましょう。外部システムへ登録される構成なら、その記録の扱いも確認します。表示、送信、受信、社内での引き継ぎを別々の確認項目にすると、どこまで正常かを判断できます。

不具合時に相談できる情報を残す

エラーが起きたら、URL、時刻、端末、入力の条件、表示された文章を記録します。何度も送信を繰り返す前に、受付側に届いていないかを確かめてください。通信障害などで、画面では失敗に見えても一部の処理が完了している場合があります。状態を調べる担当者と、安全な再試験の方法を決めます。

ホームページ制作や保守・管理サポートへ相談する際は、単に「フォームが動かない」ではなく、入力から結果までの手順を伝えると調査しやすくなります。案内の文章を直すだけでよいのか、処理や受信設定まで確認が必要なのかを切り分けて進めましょう。

二重送信を避ける案内を考える

利用者が送信ボタンを押した後、反応が分からないともう一度押したくなります。処理中の表示や完了の案内を用意し、何を待っているか分かるようにします。ただし、画面でボタンを押せなくするだけでは、再読み込みなど別の経路を含む重複への対策にならない場合があります。必要な処理はサイトの用途に合わせて担当者と設計してください。

試験で連続送信を行う必要がある場合は、受付側に知らせ、安全な仮データで行います。迷惑送信対策の制限が働くと、通常の失敗と区別しにくくなることがあります。制限に当たったときの案内も、利用者が次にどうすればよいか分かる表現か確認します。内部の詳しい判定条件を過剰に公開する必要はありませんが、説明が全くない状態も避けたいところです。

完了画面でブラウザの戻る操作をした場合に、再送信の警告や古い入力がどう扱われるかも確認します。すべてのブラウザの全挙動を同じにすることより、必要な操作が安全に完了するかを見ます。受付番号や問い合わせ履歴を提供する構成なら、その表示と記録の一致も必要です。存在しない機能を文章だけで案内しないようにしましょう。

受付後の文章を実際の運用へ合わせる

返信の目安を載せるなら、営業日、休業日、内容による違いを受付担当と確認します。電話への代替連絡を案内する場合は、その番号と受付時間が正しいかを見ます。送信が完了した利用者へ、必要以上に同じ情報の入力を求めない流れを考えてください。完了画面の役割は、受け付けたことと次の見通しを伝えることです。

自動返信がある場合は、相談文をどこまで含めるか、個人情報の扱い、差出人と返信先を確認します。自動返信が届かなかったときの案内を載せるなら、実際に使える確認方法に合わせます。すべてのサービスで同じ文章を流用するより、自社が行う受付と対応の範囲にそろえることが重要です。公開後も、運用が変わったら画面の案内を見直しましょう。

試験する組み合わせを決める

最低限の確認表には、全項目が空、必須が一つ不足、形式に誤りがある、正常に送る、確認画面から戻る、を入れます。エラーが複数出る場合は、最初の一つを直した後に次の問題が分かるかも確認してください。すべての入力パターンを無限に試すのではなく、実際の項目と処理に応じて重要な条件を選びます。

スマートフォンでは、エラーの位置へ移動できるか、キーボードで案内が隠れないか、入力後も項目名が分かるかを見ます。PCではマウスを使わずに修正と送信を試すと、選択状態や操作順の問題を見つけやすくなります。端末の表示を小さくしただけの確認と、実際に文字を入力する確認は分けて行いましょう。

完了画面からトップやサービスへ戻る導線も点検します。問い合わせを送った直後に、再度同じ送信フォームを強く勧める必要があるか考えてください。受付番号などを出す構成なら、利用者が何のために控えるか説明します。運用に存在しない番号や照会方法を見た目のために追加してはいけません。

最後に、改修後の説明文を受付担当にも読んでもらいます。画面で案内した次の行動と、社内の対応が一致していなければ、利用者の不安は残ります。フォームを作る人と受け付ける人で確認表を共有し、文章と処理と業務を一つの受付として点検することが、使いやすさの改善につながります。

参考情報

ご相談の目的に合わせた、エルスタのサポート。

関連サービス

事業の次の一歩を、
Webから。

お問い合わせ

新規制作も、今あるサイトの見直しも。目的と課題を整理するところからお話ししましょう。