地図+フォーム横並びコンタクト

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

このパーツは、左に地図エリア・右にお問い合わせフォームを横並びにしたコンタクトセクションです。レイアウトはCSS Gridの grid-template-columns: 1fr 1fr で左右を均等に分け、画面幅が狭くなる @media(max-width:600px) で1列の縦積みに切り替わります。フォームは名前・メール・メッセージの基本3項目を label で包んだ作りで、各 input がラベルと結びつくため操作しやすくなっています。地図部分は差し替え前提のプレースホルダで、ここに実際の地図を埋め込んで使います。

向いている場面

• 実店舗を持つ店舗・クリニック・サロンのアクセス＋問い合わせ
• 来訪を促したいショールームやオフィスの案内
• 所在地と相談窓口を1画面で見せたい中小企業サイト

「場所を確認しながらそのまま連絡できる」導線になり、来店と問い合わせの両方を後押しします。

カスタマイズと注意

地図のプレースホルダは、Googleマップなどの iframe 埋め込みコードに置き換えて使います。埋め込む iframe には title 属性を付けると、何の地図かが支援技術にも伝わります。実装上の注意として、このフォームは見た目のひな形で onsubmit="return false" により送信を止めているため、実運用では送信先や入力チェックを別途用意してください。アクセシビリティでは 各入力に対応するラベルを必ず残し、必須項目には required を付けます。スマホでは地図とフォームが縦に並ぶので、地図の高さを抑えるとフォームまで早く到達できます。