左右2カラム分割コンタクトフォーム

このパーツの使いどころと実装ポイント

このパーツは、左にキャッチコピーと連絡先情報、右に入力フォームを置いた2カラムのお問い合わせセクションです。レイアウトは grid-template-columns で、画面幅768px以上では情報1に対しフォーム1.2の比率で横並び、それ未満では1カラムの縦並びに切り替わります。フォームの各入力には label と for がひも付けられ、必須項目には required 属性が付いているので、ブラウザ標準のチェックが効きます。

向いている場面

コーポレートサイトや店舗サイトの「お問い合わせ」ページ、サービスの相談窓口、見積もり依頼フォームなどに向きます。左側に営業時間・電話・メールを並べられるため、フォーム以外の連絡手段も同時に案内したいときに便利です。安心感を出したいB2Bサイトとの相性が良い構成です。

カスタマイズと注意点

• 項目を追加するときは label と入力欄を for と id でひも付け、視覚と支援技術の両方でラベルが伝わるようにします。
• このパーツは見た目のみで送信処理は含みません。実運用では送信先や検証、スパム対策を別途用意してください。
• 左側の連絡先は実際の営業時間や番号に置き換え、電話・メールはリンクにすると操作しやすくなります。