問い合わせフォームで入力を間違えても直して送れるようにしましょう

例えば、問い合わせフォームに相談を書き終えて送信ボタンを押すと、「入力内容を確認してください」とだけ表示された。どの欄か分からずページを戻ったところ、長く書いた相談文が消えた。初めてサイトを使う人にとって、入力ミスの訂正に時間がかかると、その場で送るのを諦める理由になります。

WordPressの公式サポートフォーラムでは、送信時にどの欄の誤りか分からない通知が出るという当事者の報告があります。別の質問では、無効な入力のまま何度も押すと、エラー表示が重なると報告されました。いずれも投稿者が使う個別環境の話で、すべてのフォームで同じ症状や原因があると判断する材料ではありません。制作・運用担当者は、自社の画面でどこまで修正できるかを一度通して試しましょう。

送信できるかに加えて、間違えた後に戻れるかを見る

正常な内容を入れて送信できるかという確認は大切です。一方、実際の訪問者は、メールアドレスの入力で一字を落としたり、必須項目を見落としたりします。正常な入力のテストだけでは、その人が表示された案内を使ってやり直せるかは分かりません。

復帰の確認では、意図的に一部の値だけを間違え、ほかの欄は正しく埋めます。送信を試した後に、誤りが見つかる、何を直すか分かる、正しい内容は保持される、直したあと受付まで進む、という順に見ます。最後だけ通った場合も、途中で長文を全部書き直したなら、フォームの改善点として残します。

まず、実際のお客様が使う入口を選びます。トップページだけでなく、検索やSNSで案内しているサービスページからフォームへ進みます。フォームが複数あるなら、最初は主な問い合わせ先を一つ選びます。申込みがあるかどうかを試すのではなく、閲覧者が入力ミスから戻れるかに範囲を絞ります。

テストに使うデータと受け取り側を先に決める

入力には架空の名前とテスト用の相談文を用意します。メールアドレスの欄で実際の受付を確かめる場合は、事業者が管理するテスト用アドレスを用意します。誰かのアドレスを適当に作ると、実在の相手に確認メールが届く可能性があります。テストの送信先や受付担当を確認し、普段の顧客連絡と区別できる目印を付けます。

可能なら制作担当と、公開用と同じ動きを確認できるテスト環境を用意します。本番でしか分からない差があって送信する場合は、受付担当者へ日時と目印を知らせ、予約枠を確保する操作や実顧客宛ての通知を避けます。承認を得られない場合は本番の送信完了をテストせず、未確認の範囲を票に書きます。失敗した値でも受付される不具合があり得るため、試す前に受け取り側をそろえると切り分けやすくなります。

相談文は一行だけで済ませず、二、三行にします。例えば「動かなくなった道具の修理について相談したい。購入時期は不明。折り返しは午後を希望」といった架空の文章です。エラーが出た後に文の先頭だけ見えていても、後ろの行や改行がなくなることがあります。確認の間は、元の文章をテスト票にも控えておきます。

どの欄に戻ればよいか初めて見る人として確かめる

最初のケースは、必須の名前を空にするなど、誤りが一つの場合です。送信ボタンを押し、ページのどこに何と表示されるか確認します。画面がフォーム上部へ移動したなら、そこから問題の欄まで分かるか見ます。画面が送信ボタン付近のままなら、見えている範囲で問題が伝わるかを見ます。上か下かだけで判定せず、利用者が迷わず欄に戻れることを目標にします。

次は名前を空欄にしたまま、メールの欄にも書式が崩れた値を入れます。「複数の欄が間違っています」という通知だけで戻る先が分からないのか、欄名と直し方が読めるのかを見ます。一つ目を直した後に、もう一つをどこで見つけるかまで試します。フォームが長い場合、画面の上の一覧と欄付近の説明が対応していると、離れた場所にある欄を探す負担を減らせます。

送信を押した直後にブラウザーが最初の一箇所へ案内する場合があります。そのときは一度に二つ表示されることを合格条件にせず、一つ目を直し、再度試すと次の欄に進めるかを確かめます。逆に、送信を試した後にフォームが複数の誤りをまとめて返す作りなら、表示された各項目から対応する欄を見つけられるかを見ます。どちらの仕組みでも、訂正済みの欄や関係のない欄が再び空になると、訪問者は行き来を繰り返します。表示方式と復帰できるかを分けて判断してください。

W3Cのフォーム解説では、通知に入力欄の表示名を含め、何が違い、どう直せるかを簡潔に示す例があります。例えば「メールアドレスを確認してください」より、入力が「test@」で終わっていると検出できた場合は「メールアドレスに @ の後の文字を入力してください」と書くと、修正する箇所が伝わります。原因が分からない状態で個別の文字だけを断定すると、正しい入力を直させてしまうため、フォームが確認できる事実に合わせます。

エラーの色だけに意味を持たせると、どこに問題があるかを色から判別しづらい人がいます。欄の表示名や文章でも伝わるかを見ます。画面上に一覧を出す場合は、一覧の項目から該当欄へ移動できるか、固定の見出しやキーボードが欄を覆わないかも確かめます。通知の出し方は一つに決める必要はありません。利用者が今の状態と次の操作を知れることが大切です。

直した欄以外が保たれているか確認する

名前やメールアドレスを直すときは、相談文、問い合わせ種別、選択済みの項目など、直す必要のなかった内容が残っているかを読みます。ブラウザーの戻る操作で一部が残ったというだけで十分とは言えません。フォームの中で訂正する経路と、確認画面から戻る経路が別にあるときは、別々に試します。複数欄を直すなら、一つ目を直した後にもう一つを探す間も正しい内容が残るか見ます。

添付ファイルや確認用の入力など、画面や安全上の理由で再入力が必要なものもあります。すべての情報を残すよう一律に求めず、再入力が要る理由と操作が画面で分かるようにします。相談内容を次回の訪問まで保存する機能は、今回の復帰確認とは別に考えます。共用端末に個人情報が残る可能性があるため、同じ手続の間に保つ情報と、セッションを越えて残すかどうかを分けます。

スマートフォンでは、入力欄を押すとキーボードが画面を覆うことがあります。通知が出ても、本文や訂正箇所が隠れていないかを見ます。スマートフォンでは画面の狭さとスクロール、パソコンではキーボードだけで順番に移動できるかというように、実際の操作の違いを制作担当と確かめます。読み上げを使った通知の確認は対応する環境で行い、実施していなければ未確認と残します。

キーボードで確認する場合は、最初の欄からTabキーで順に移動し、移動先が画面で分かるかを見ます。送信を試して通知が出たら、次のTab操作がどこから始まるかを控えます。上に通知一覧があれば、そのリンクをキーボードで選び、該当欄へ戻って入力を続けられるかを確かめます。画面の見える位置が動いても、次にキーを押したときページ先頭のメニューに移ると、修正箇所に戻るまで長くかかる場合があります。制作担当へは「通知が見えた」「キーボードの操作位置が動いた」「読み上げで通知を確認した」を別々に伝えます。

案内どおりの値で止まったら、許容条件を調べる

入力例どおりに値を入れたのにエラーになるとき、訪問者は何を変えればよいか判断できません。例えば電話番号が任意と案内されているなら、空欄のまま試します。氏名欄で文字の種類に条件を掲示しているなら、掲示した例に合う架空の氏名で試します。メール欄は、事業者のテスト用アドレスを手入力した場合と貼り付けた場合を比べ、どちらで止まったかを記録します。無効なデータを受け付けるよう設定を変える前に、画面の説明と実際に許される入力が一致するか確認します。

正しい値で止まる場合は、入力欄を繰り返し直す案内を追加する前に、制作担当が検証ルールや通信の状態を調べます。修正後は、正しい値で進めることと、明らかに書式が崩れた値には訂正案内が出ることを別々に試します。正しい値も誤った値も通ってしまったら、訪問者が直せる状態を改善したことにはなりません。公開側で確認できない条件はテスト環境の結果として区別します。

入力の問題と、受付状態が分からない問題を分ける

送信直後に、どの欄が誤りか明示され、実際に受付されていないことを確認できる場合は、その欄を直して再試行できます。一方、読み込み中の表示から進まない、通信エラーが出た、受付されたか分からないという場合は、同じ内容を何度も送ると重複するかもしれません。入力欄を直せば解決する症状とは別に、テスト側で記録します。

フォームの実装によって、成功画面、受付記録、通知メールが示すことは異なります。制作担当と、受付を確かめる記録や、担当が確認できる場所を先に決めてください。成功画面が見えていないだけで受付なしと決めず、反対に画面に表示が出ただけで担当者に通知が届いたと決めないようにします。本稿の復帰テストでは、一回の修正後に、想定した受付が一件だけ記録されたかを確認できる環境で確かめます。

公開中のフォームで症状が続くなら、利用できる代替窓口をフォームの近くに案内できるか検討します。既に問い合わせを送った可能性がある利用者へは、再送を一律に求めず、送信した時刻と用件の概要を伝えられる連絡先を示します。公開されていない個人の連絡先や、確認していない受付時間は掲載しません。代替案内が機能していても、フォームの復帰を確認する作業は残ります。

制作担当に渡す復帰テスト票の例

次の表は架空のフォームを想定した確認例です。すべてのサイトで同じ表示や同じ記録方法を求めるための表ではありません。自社の公開URL、端末、受付の確認手段に置き換えます。一つずつ試すと、直した結果の違いを追いやすくなります。

ケース	試すこと	合格とする状態
一つの入力ミス	名前だけを空にして送信を試す	名前欄の場所と入力が必要なことが分かり、相談文が残る
二つの入力ミス	名前を空にしてメール書式も崩し、一方ずつ直す	二つの欄に戻れ、直した値と正しかった値が保たれる
通知の重複	テスト環境でエラーのある状態から再度ボタンを押す	同じ案内が際限なく増えず、必要な訂正の説明を見失わない
訂正して一度送信	誤りを直し、確認したテスト窓口へ送る	相談の全文が残り、一回の受付と対応付けられる
受付状態が分からない	制作担当が用意した通信失敗等の条件を試す	案内で入力ミスと誤認させず、確認できる窓口や次の行動が分かる

たとえば「未ログインのスマートフォン、サービス紹介からフォームへ。名前を空にし、本文に三行入力。送信ボタンを一回押す。『エラー』のみ表示。名前欄への案内が見えず、正しい本文の二行目が空になる。受付側は記録なし」と残すと、何が起き、どこまで確認したかが伝わります。受付側を見ていない場合は、最後を「受付状態未確認」にします。観察した事実と期待する動きを別欄にすると、制作側が同じ症状を探しやすくなります。

自社の確認に使う場合は、次の欄を一件ずつ複製できます。送信の前後で同じ欄を比べられるよう、値を書く欄を分けます。受付件数の欄は、記録を確認できた場合だけ数字を入れます。

対象URLと端末：
テスト識別子：
最初の値（誤りの欄と保持したい欄）：
試行後に表示された文言と位置：
試行前後で変わった入力：
訂正した内容と再試行後の受付件数：
期待した動き：
未確認の条件：

架空例として、修正前は「例T02。名前は空欄、相談欄は三行。送信で画面下に『エラー』と表示。二行目を失い、受付はなし」と記録しました。改修案は、名前欄の表示名と必須の案内を出し、相談欄の三行を保持することです。再試験では、同じ入口から同じ内容を入力して一度押し、「名前を入力してください」から欄を見つけます。三行が保持されていることを照合し、名前を入れて一度送信し、T02とは別の目印を付けた再試験が一件だけ受付されたことを記録します。

確認したことを別担当へ渡す場合は、実際の相談データを貼らず、架空の入力文とテスト識別子だけを共有します。画面の記録に社内の通知や利用者のアドレスが写るなら、共有前に隠すか文章の記録に置き換えます。受付記録へアクセスできない担当は画面側までを記録し、受け取り側の担当が別に確認します。二人の結果は同じテスト識別子で結べるようにします。

誤りの案内が出たとき、電話で顧客対応する人も同じ言葉を使えるようにします。例えば「メール欄のどこを見ればよいか」と聞かれた場合、入力例を案内できます。送信状態が分からない問い合わせでは、確認できる窓口が受付時刻と用件の概要から状況を照合し、必要な場合にだけ再入力を依頼します。制作後の運用も決めておくと、画面表示と現場の案内が食い違いにくくなります。

改修を依頼する際は、「エラー文をもっと親切に」とだけ書かず、例えば「名前欄とメール欄をそれぞれ特定でき、直した後に相談文の全行が残る状態を確認したい」と書きます。フォーカスの移動先や通知の実装は、既存フォームと端末の条件を見て制作担当が選べます。見た目の案を確認するだけで完了にせず、テスト環境の操作で合否を確かめ、公開後も許された範囲で同じ入口から見直します。

問い合わせの内容を守れるかを完了条件に入れる

修正前のテストで分かったことは、修正後の同じ操作で確かめます。最初の入力が正しいケースも一度通し、エラー対策の変更で通常の受付を妨げていないかを見ると、再試行だけ通って普段の入力が止まる問題を見つけやすくなります。問い合わせ内容を記録する画面を見られる場合は、テスト用と識別できる目印で照合し、確認に使った記録の扱いを社内手順に従って決めます。

未確認の条件も、引き継げる形で残します。たとえば「縦向きのスマートフォンで必須欄二つの修正と本文保持を確認。添付ありのケースは別途」と分けます。通知文だけの修正が済んだ段階で、添付や外部予約まで改善したと扱わない方が、次回どこから確認するか明確です。公開側で一度確認した結果も、フォームや確認画面を更新した後に同じ票で見直せます。

島田市の小規模事業者でも、最初はよく使う問い合わせフォーム一つに対象を絞れます。入力を間違えた箇所を見つけ、書いた相談が残り、訂正後に受付へ進む。この一連の操作を確認すると、制作担当とどこを改善するか具体的に相談できます。問い合わせ数の変化を評価する場合は、フォームへの流入や受付条件の変化も別に確認し、テストの合格と事業上の効果を分けて記録します。

問い合わせまでの道筋を見直すときは、LIFESEEDSのホームページ制作・改善支援をご覧いただき、お問い合わせからご相談ください。

アイキャッチは説明用に生成したイメージです。