連絡先一覧 + フォーム

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

この「連絡先一覧 + フォーム」は、左に電話・メール・SNS などの連絡手段、右に入力フォームを並べた 2 カラムの問い合わせパーツです。grid-template-columns:1fr 1.4fr でフォーム側をやや広く取り、左の連絡先は紺色（#1a1a2e）の <aside> に <dl><dt><dd> でまとめ、各項目にインライン SVG アイコンを添えています。フォーム側は <label> を縦積みにした素直な構造です。

向いている場面

電話でもメールでも受け付けたい総合窓口に向きます。店舗・クリニック・士業・BtoB サービスなど、「すぐ電話したい人」と「フォームでじっくり送りたい人」の両方に応えたいサイトに最適です。連絡先を定義リスト（dl）で構造化しているため、項目と内容の対応が明確に伝わります。

カスタマイズと注意点

• 電話番号は tel:、メールは mailto: のリンクにすると、スマホからワンタップで発信・送信できます。
• フォームの各入力には label を紐づけ、必須項目には印と required を付けるとアクセシビリティと入力ミス防止に役立ちます。
• 初期の電話番号やメールはサンプルなので、必ず実際の連絡先に差し替えてください。
• スマホでは 2 列が 1 列に折り返します。連絡先を先に見せたいか、フォームを先にするか順序を検討してください。