ミニマルお問合せフォーム
会社名・お名前・メールアドレス・お問合せ内容の4項目に絞った、カード型の ミニマルなお問い合わせフォーム です。 form には novalidate を付けてブラウザ標準のエラー表示を抑え、必須項目（お名前・メール）には required と type="email" を指定して自前のバリデーションを掛けやすくし…
このパーツの使いどころと実装ポイント
会社名・お名前・メールアドレス・お問合せ内容の4項目に絞った、カード型のミニマルなお問い合わせフォームです。form には novalidate を付けてブラウザ標準のエラー表示を抑え、必須項目（お名前・メール）には required と type="email" を指定して自前のバリデーションを掛けやすくしています。各項目は label と input を for / id で結び、必須・任意を小さなバッジで示す作りです。フォーム全体は flex-direction:column で縦積みにし、白いカードに柔らかい影を付けて視線を集めます。
向いている場面
- コーポレートサイトやLPの問い合わせ・無料相談の受け口
- 項目数を最小限にして離脱を防ぎたい資料請求フォーム
- サロンや教室の体験予約など、まず連絡が欲しい用途
実装の注意
このサンプルは送信処理を含まないため、実運用ではフォームの送信先（メール送信スクリプトやフォームサービス）を action に設定します。スパム対策にはサーバー側のチェックや簡易なボット判定を併用してください。アクセシビリティ面では label の関連付けに加え、エラー時に aria-invalid やメッセージ領域を用意すると、読み上げ環境でも入力ミスが伝わります。入力欄は font-size を16px以上にしておくと、スマホで自動ズームが起きにくく操作しやすくなります。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
このフォームはそのまま送信できますか？
サンプルは入力UIとバリデーションの土台のみで、実際の送信処理は含まれていません。利用時はform要素のaction属性にメール送信スクリプトやフォーム代行サービスのURLを設定し、サーバー側でも入力チェックを行ってください。
項目を増やしたいときはどう編集しますか？
既存の .contact__field ブロックを複製し、labelのforとinputのidをそろえた新しい組を追加すれば項目を増やせます。必須にする場合はinputにrequiredを付け、ラベルに必須バッジを添えると入力者に伝わりやすくなります。