HPの問い合わせフォーム｜送信前・エラー・完了まで確かめる5項目

お問い合わせフォームを公開する前に、空欄を埋めてボタンを押すところだけで確認を終えていませんか。

見ておきたいのは、「何を入力するか」「間違えたらどう直すか」「送信できたと分かるか」の流れです。画面に完了と表示されることと、担当者が問い合わせを受け取れることも、分けて確認します。

この記事では、説明用に作った架空のフォーム画面を使います。実案件の改善前後、実装済みのフォーム、動作検証や成果の実績ではありません。

■ 案内が少ない画面と、確認箇所を整理した画面

図1では、同じ「会社への制作相談」を想定し、入力前・エラー時・完了時の案内を比べています。

図1：各項目で、案内が少ない例と確認したい情報を示す例を比較。表示文言は架空です。

案内が少ない例の「入力に問題があります」だけでは、どこを直せばよいか分かりません。「処理しました」だけでは、相談を受け付けたのかも曖昧です。

確認したい情報を示す例では、①必須・任意、②直す項目と方法、③送信完了を文字で示しています。色を変えるだけでなく、文言でも状態を説明するのがポイントです。ただし、この図のように見えるだけでは、実際の送信や通知が正常とは判断できません。

■ 1．入力する前に、必須と任意が分かるか

名前・メールアドレス・相談内容など、送信に必要な項目には「必須」と明記します。入力例や補足が必要な項目には、その項目の近くに案内を置きます。

たとえば、会社名がなくても相談できる運用なら「会社名（任意）」と表示する方法があります。反対に、受付に必須なら「任意」とは書けません。見た目を先に決めず、実際に必要な情報を担当者と確認してください。

個人情報の取り扱いの案内も、入力前に確認できるか見ておきましょう。説明のない情報を念のため集めるのではなく、必要な項目に絞ります。

■ 2．エラーが出たら、自分で直せるか

図の②は、メールアドレスの形式を直す例です。エラーがある項目と、「メールアドレスの形式をご確認ください」という案内を対応させています。

公開前のテストでは、許可されたテスト環境・手順で、必須項目の空欄や形式が違う入力を試します。どの項目が原因か分かるか、他の入力内容が必要以上に消えないか、修正して続けられるかを確認してください。

通信に失敗した場合は、入力ミスとは別です。送信できていないのに完了表示にならないか、再試行や別の連絡方法の案内が実際の運用と合うかも、制作担当に確認します。

■ 3．スマートフォンでも最後まで入力できるか

パソコンで問題がなくても、実際に使うスマートフォンで確かめます。

入力欄を押すとキーボードが開くか。長い相談内容を入力しても、文字やエラーが隠れないか。画面を拡大しなくてもラベルを読めて、送信ボタンまで進めるか。見た目の縮小表示だけでなく、入力する操作を通して確認してください。

送信中の表示や連続タップ時の扱いも確認します。ただし、二重送信のテストは通知や受付に影響するため、管理者と方法を決めてから行います。

■ 4．送信後に、完了と次の行動が分かるか

図の③は「お問い合わせを送信しました」と明示する例です。そのうえで、受付後の実際の流れに合う案内を用意します。

自動返信を送る設定なら、送信先の確認方法や、届かない場合の案内を検討します。自動返信がないなら「確認メールを送りました」と書いてはいけません。

返信の目安や対応時間を載せる場合も、運用担当が守れる条件を確認してから記載します。この記事の図には、未確認の返信日数や対応保証を入れていません。

■ 5．受け取る側まで届いているか

完了画面が出ても、それだけで通知先への到着を確認したことにはなりません。管理者の許可を得たテスト送信で、合意した受付先に届いたか、内容が欠けていないかを確認します。

自動返信がある場合は、その到着も別に確認します。テスト用の宛先・内容を事前に決め、顧客の実データや秘密情報を使わないようにしてください。第三者のフォームに、無断でテスト送信するのは避けましょう。

■ コピーして使える、公開前チェック記録

結果は「OK／要修正／未確認」で残します。未確認をOKにしないことが、次の確認につながります。

確認日：［　　　　　　　　］

対象のURL・画面：［　　　　　　　　］

使用端末・ブラウザ：［　　　　　　　　］

テスト許可・方法を確認した担当者：［　　　　　　　　］

□ 必須・任意と入力方法が分かる：［OK／要修正／未確認］

□ エラーの場所と直し方が分かる：［OK／要修正／未確認］

□ スマートフォンで入力・修正できる：［OK／要修正／未確認］

□ 送信完了と、その後の案内が分かる：［OK／要修正／未確認］

□ 受付先への到着を確認した：［OK／要修正／未確認］

自動返信：［あり／なし／未確認］　ありの場合の到着：［　　　　　　　　］

困った操作：［　　　　　　　　］

表示された文言：［　　　　　　　　］

期待していた結果：［　　　　　　　　］

実際の結果：［　　　　　　　　］

制作担当に確認したいこと：［　　　　　　　　］

記録やスクリーンショットを渡すときは、氏名・メールアドレス・相談内容などの個人情報を伏せ、パスワード等は含めないでください。

■ フォームが必要な場合は、購入前に範囲を確認

USER ABILITIESのホームページ制作では、お問い合わせページと、電話・メール等の合意した連絡先への導線を標準範囲に含みます。一方、サイト内で入力して送信するフォームの送信機能は標準料金に含みません。

フォームをご希望の場合は、購入前に対応可否・方式・追加制作費・サービス利用料・運用方法を確認します。通知や自動返信も、必要な動作として具体的にお知らせください。

受付件数が少なく電話での聞き取りが適している場合は、フォームを設けず、対応時間と電話の案内を整える方法もあります。実際の受付体制に合わせて選びます。

これから制作を依頼する方は、希望する受付方法と必要な項目を。既存サイトがある方は、対象URLと困っている操作をまとめて、ご相談ください。個別の対応範囲は購入前に確認します。

ホームページ制作サービスを見る

https://coconala.com/services/4455663