シンプル問い合わせフォーム
これは名前・メールアドレス・件名・本文の4項目をたて1列に並べた、標準的なお問い合わせフォームです。各項目は label で文字とフォーム部品を包んでおり、必須欄には * マークと required 属性を付けています。
このパーツの使いどころと実装ポイント
これは名前・メールアドレス・件名・本文の4項目をたて1列に並べた、標準的なお問い合わせフォームです。各項目はlabelで文字とフォーム部品を包んでおり、必須欄には*マークとrequired属性を付けています。送信ボタンは濃紺で塗り、フォーム全体をmax-width:580pxの中央寄せにしているため、画面幅が変わっても読みやすい縦並びを保てます。
向いている場面
余計な装飾がないので、コーポレートサイトの問い合わせページ、サービス資料請求、士業や教室の予約受付など、信頼感を大事にしたい場面に合います。件名だけ任意にしてあるので、ユーザーの入力負担を増やさず本題に集中させられます。
カスタマイズと注意点
- 項目を増やすときは
labelごとコピーし、電話番号ならtype="tel"を使うと、スマホで数字キーボードが開きます。 - このパーツはHTMLとCSSだけで、実際の送信処理は含みません。
formのactionに送信先や問い合わせ管理ツールのURLを指定してください。 - 必須を色だけで示さず
*の文字も併用しているので、色が見えにくい人にも伝わります。送信ボタンにフォーカス枠を残すと、キーボード操作でも使いやすくなります。
よくある質問
このフォームだけで問い合わせ内容は届きますか？
いいえ。見た目を作るHTMLとCSSのみで、送信処理は含みません。formのaction属性に送信用のプログラムや問い合わせ管理ツールのURLを設定してはじめてメールなどに届きます。
項目を追加・削除するにはどうすればいいですか？
1つのlabelタグが1項目に対応しています。labelごとコピーすれば項目を増やせ、不要な項目はlabelごと削除すれば減らせます。必須にしたい欄にはrequired属性を付け、見出しに*を添えてください。