デザイン・設計NOTE 06 / DESIGN

資料請求フォームの作り方|BtoBの入力項目とメール・郵送の受付設計

BtoBの資料請求フォームを、メール・郵送の提供方法から設計。必要項目の表、住所の条件分岐、資料の提供手順、営業担当者への引き継ぎを具体例で紹介します。

資料請求フォームでは、資料を届けるための情報と、営業担当者が知りたい情報を分けて考えます。メールで資料を案内するだけなら住所は不要な場合があります。一方、郵送するなら届け先と宛名が必要です。まず提供方法を決めてから項目を作りましょう。

この記事では、法人向けサービスの資料請求を例に、入力項目、受け取り方法の分岐、受付後の案内を具体化します。

フォームの前で、もらえる資料を説明する

利用者は、氏名を入力する前に資料が役立つかを判断します。資料名、対象読者、扱う内容、提供形式をページに示してください。「詳しい資料をお送りします」だけより、何を比較・検討できるかが分かる方が請求の目的を持ちやすくなります。

資料紹介の例:店舗向けWebサイト制作のサービス案内です。制作の進め方、依頼前に用意するもの、公開後の運用方法を掲載しています。PDFをメールでご案内します。

価格表が載っていないなら「料金がすべて分かる」と書かないなど、紹介文と資料の内容を揃えます。資料更新時には、フォームの選択肢も古い名称のままになっていないか確認します。

必須項目は資料の提供方法から逆算する

法人向け資料請求の項目例
項目メール案内郵送
希望資料複数ある場合に選択複数ある場合に選択
名前・会社名宛名や法人確認に必要な範囲送付先の宛名として確認
メールアドレス提供先として必要受付連絡に使う場合に確認
郵便番号・住所通常は表示不要配送に必要
電話番号必要性を確認配送や連絡の運用で判断
検討時期・相談内容任意から検討任意から検討

メールだけで完結する請求でも、営業管理上の理由で項目を増やしたくなることがあります。その情報がないと資料を提供できないか、後の相談で確認できるかを分けて検討します。資料請求と個別相談を同時に強制しない設計も選択肢です。

メールと郵送を選べる場合は、必須条件も切り替える

郵送を選んだときだけ住所欄を表示するなら、画面上の表示だけでなくサーバー側の検証条件も一致させます。隠した住所欄が必須のままだと、利用者には直せないエラーになります。

「郵送」から「メール」へ変更したときは、不要になった住所を送るかどうかも設計します。通知メールに古い選択肢や非表示の値が残ると、担当者が誤って発送する原因になります。入力画面、確認画面、メールの三つで同じ最終選択になっているかを確かめてください。

資料を自動で届けるのか、担当者が送るのか決める

自動返信があることと、選択された資料を自動配布できることは別です。固定の案内文を返すだけなのか、資料ごとにURLを切り替えるのか、添付で送るのかを確認します。後二者は製品によって追加の実装が必要です。

担当者から送る場合の受付文例:資料のご請求を受け付けました。ご希望の資料と受け取り方法を確認し、担当者よりご案内します。郵送をご希望の場合は、発送後のお届けまで別途お時間をいただきます。

PDFのURLを案内する場合、URLを知っている人が誰でも読める資料なのかを確認します。非公開資料には閲覧権限など別の仕組みが必要です。送信完了ページにリンクを置いただけで、アクセス制限ができるわけではありません。

受け付けた請求を対応につなげる

資料を送っただけで対応完了にするのか、希望した人へ個別相談を案内するのか、営業側と決めます。「資料だけ見たい」「相談も希望する」の選択肢があるなら、通知メールで見分けられるようにしましょう。

  • 希望資料の名称が通知メールに入っているか。
  • 対応中・提供済みを担当者が区別できるか。
  • 郵送先の建物名や部署名を必要に応じて入力できるか。
  • 資料が改訂されたときの差し替え担当が決まっているか。
  • 返信できなかった請求を確認する手順があるか。

用途と機能を照合して実装する

FreelanceFormには、希望資料とメール・郵送の受け取り方法を確認する資料請求フォームの用途があります。資料の自動配布や営業システムへの連携まで必要なら、それぞれの要件を分けて確認してください。

項目を減らす判断は入力項目の設計、受付文は自動返信メールの解説も参考になります。資料を届けるところまで一度試せば、フォームの外に残る作業も見えてきます。

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

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

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

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