Category · お問い合わせフォーム

お問い合わせフォームのデザイン例とAIプロンプト

お問い合わせフォーム、申し込みフォーム、複数ステップの入力フォームなど、ユーザーが情報を送信するすべてのインターフェースのAIプロンプト集。

Designs002 Sectionフォーム Keywordお問い合わせフォーム

フォームについて

コンバージョンの直接の場。1ページ型・複数ステップ型・モーダル型に加え、フィールドの並べ方、ラベル位置、エラー表示のタイミング、送信ボタンのコピーで完了率が大きく変わります。リアクティブバリデーション、フィールド単位のヘルプ、進捗バー、自動保存が標準装備です。離脱は項目の多さより、送ったあとに何が起きるか分からないことで起きます。返事までの日数や最小規模を先に開示すること。項目数を明示するだけでも、どこまで続くのかという不安が消えます

フォームの構成要素 ラベル ── 入力欄の上に置く label と for / id で結ぶ 補助説明 ── 入力する前に読ませる エラーは入力欄の直後に 送信は1つ。取り消しは目立たせない 必須は「※」ではなく言葉で書く ── 記号は読み上げで伝わらないことがある 項目数がそのまま完了率に効く。減らせない項目だけを残す
フォームはラベルの位置と、エラーの置き場所で使いやすさが決まります。プレースホルダをラベル代わりにすると、入力後に何の欄か分からなくなります。

よく使われる場面

  • お問い合わせ・サポート受付
  • イベント申込み・予約フォーム
  • メンバー登録・プロフィール作成
  • アンケート・調査票
  • 複数ステップの法人申請

成功のポイント

  • フィールド数は5-7個までを目安に
  • 必須/任意は明示してユーザーの不安を消す
  • エラーは送信時でなくフィールド離脱時に
  • 複数ステップなら進捗バーで残量を可視化
  • ボタンコピーは『送信』でなく『○○する』

このカテゴリのデザイン

他のカテゴリ