メール・運用NOTE 03 / OPERATION

お問い合わせフォームの納品前チェックリスト|送信テストと引き継ぎの確認項目

お問い合わせフォームの納品前に確認する入力・確認画面・送受信・添付のチェックリスト。テスト記録の例と、クライアントへ引き継ぐ設定・保守の確認事項を紹介します。

フォームの納品確認は、完了画面が出るかだけでは不十分です。入力できること、正しい内容が送られること、管理者通知と自動返信を受信できること、納品先がその後に対応できることを分けて確認します。

初めての受託制作でも使えるように、チェックする順序と記録例をまとめました。既存フォームのリニューアルやサーバー移転後にも使えます。

送信テストの前に、宛先と実施時間を決める

本番の通知先へ何十通も届くと、通常の問い合わせと混ざります。クライアントとテスト時間を共有し、件名や本文の先頭にテストであることを明記してください。テスト用に通知先を変更した場合は、最後に本番設定へ戻し、その状態で承認された最終確認を行います。

入力には架空の名前と管理できるメールアドレスを使います。応募者の履歴書や顧客の住所を、動作確認のために流用しないでください。添付が必要なら、架空の内容だけを記載した確認用ファイルを用意します。

入力画面のチェックリスト

  • 各入力欄に項目名があり、必須と任意が文字で分かる。
  • スマートフォンで文字や送信ボタンが画面外へはみ出さない。
  • キーボードだけで入力欄からボタンまで移動できる。
  • メールアドレスの貼り付けなど、通常の入力操作を妨げない。
  • 必須項目を空欄にすると、対象と修正方法が分かる。
  • 選択肢を変えた場合、必要な項目の表示と必須条件が一致する。
  • 入力前に、受付後の流れや案内ページへのリンクを確認できる。

エラーは色だけに頼らず、何を直せばよいか文章で伝えます。例えば「入力エラー」より「メールアドレスを入力してください」の方が次の操作を判断できます。W3Cのフォーム通知の解説も、エラーと完了の通知を設計する参考になります。

確認画面と送信処理を、通常操作以外でも確認する

納品時に残すテスト記録の例
操作確認する結果記録
必須だけ入力任意欄が空でも完了できる日時・端末・結果
確認画面から戻る仕様どおり入力内容が保持される修正前後の値
ボタンを連続操作不要な重複受付を抑えられる実際の受信通数
添付あり・なし許可した条件で受付できる形式・容量・結果
送信に失敗する条件成功と誤認させず、再試行を案内する検証環境での結果

失敗条件は、本番の接続設定を無断で壊して試すものではありません。検証環境や用意されたテスト手段で確認します。長文、日本語、改行、記号を含む内容も一度は通し、入力からメール本文まで欠けないかを確かめましょう。

管理者通知と自動返信を別々に受信確認する

管理者側では、宛先、件名、すべての入力内容、返信操作時の宛先を見ます。利用者側では、差出人名、受付の説明、返信先、署名を確認します。片方だけ届いた場合に、フォーム全体を正常と判断しないことが大切です。

完了画面は処理結果の表示で、受信箱への到達を保証するものではありません。送信ログの扱いも含め、メールが届かないときの確認手順を納品先と共有すると、その後の切り分けがしやすくなります。

引き継ぎには「変更場所」と「担当者」を残す

  • フォームの公開URLと、ファイルの配置場所。
  • 通知先・送信元・自動返信文面の変更手順。
  • サーバー・ドメイン・送信アカウントの管理担当。
  • 更新、障害、迷惑メール増加に対応する担当と連絡方法。
  • 保守に含む作業、別途相談になる変更、対応期間。
  • テスト結果と、公開後に再確認するタイミング。

パスワードをチェック表や画面のスクリーンショットへ書き込まず、受け渡し方法を分けます。テンプレートの再利用や納品条件は、採用する製品の案内で確認してください。FreelanceFormでは料金・ライセンスページが確認先です。

公開後にも、変更をきっかけに点検する

サーバー移転、PHP設定の変更、送信アカウントの変更、入力項目の追加は再確認のタイミングです。送信ボタンを押さなくても、リンクや入力画面の表示は点検できます。実送信を伴う確認は、受信する担当者と調整して行います。

FreelanceFormを導入する場合は、導入ガイドとこのチェックリストを照合し、案件で変更した箇所を中心に確認してください。納品のゴールは、制作者の画面で動くことから、納品先が受付を続けられる状態までです。

THANKS FOR READING.ページの先頭へ
YOUR NEXT STEPFROM KNOWING TO MAKING. ↗

学んだことを、
次の制作案件へ。

フォームの土台があれば、デザインにもっと向き合える。HTML・CSSで編集できる、買い切りのお問い合わせフォーム。

FreelanceFormを見てみる HTML・CSSで編集 / 10デザイン / 買い切り