情報＋フォーム2分割コンタクト

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

左に連絡先情報、右に入力フォームを並べた2カラムのお問い合わせセクションです。CSS Grid の grid-template-columns:.9fr 1.1fr で情報列をやや狭く、フォーム列を広く取り、メール・電話・受付時間・所在地の4項目を Material Symbols の SVG アイコン付きで縦に並べています。フォームはカード状に浮かせ、入力欄のフォーカス時に枠線色とリングが変わる視覚フィードバックを備えています。

向いている場面

士業事務所やコンサル、制作会社など「まず相談から」という導線を作りたいコーポレートサイトの末尾に向きます。実店舗を持つクリニックや工務店なら、所在地・受付時間が同じ枠に収まるので来店前の確認にも役立ちます。資料請求やお見積もり依頼の受け皿としても使えます。

カスタマイズと注意

• 連絡先4項目は ct__row を増減すればLINEやFAX行も追加できます。アイコンは Material Symbols の別パスに差し替え可能です。
• このフォームは onsubmit="return false" の見た目用です。実運用では送信先（メール送信スクリプトやフォームサービス）への接続が必須です。
• 各 input には label for が紐づき、スクリーンリーダーでも項目が読み上げられます。type="email" でスマホのキーボードも最適化されます。
• 820px以下で1カラムに切り替わるため、狭い画面でも入力欄が潰れません。