基本お問い合わせフォーム

解説

基本お問い合わせフォームは、お名前・メールアドレス・お問い合わせ内容と送信ボタンだけで構成された最小構成のコンタクトフォームです。CSS のみで整えており、JavaScript は使っていません。label で項目名と入力欄をひとまとまりにし、flex-direction:column で縦に積むことで、ラベルが入力欄の上に来る読みやすいレイアウトにしています。各入力には required を付けているので、未入力のまま送信しようとするとブラウザが標準で警告します。

使う場面

• コーポレートサイトの問い合わせ受付
• LP・サービスサイトの資料請求や相談窓口
• 個人サイト・ポートフォリオの連絡フォーム

入力欄は :focus で枠線色が #667eea に変わり、操作中の場所がひと目で分かります。ボタンは :hover で濃い色に切り替わります。色をブランドに合わせたいときは、この 2 か所の色をそろえて変更してください。実際にメールを送るにはサーバー側の送信処理や送信先の設定が別途必要で、このコードは見た目と入力チェックまでを担当します。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録