Reach
A two-column contact: email, phone, address and hours on the left beside a form card on the right.
Contact section templates
The contact section is where intent turns into a message. Most of its success comes down to removing friction: offering the way people actually want to reach you, and not asking for anything you do not need.
8 contact section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Details
A grid of boxed detail tiles, one per channel — email, phone, address and hours — each with its own icon chip.
Message
A form-forward contact block: one card with a name and email row, a message field and a full-width submit.
Card
One centered elevated card holding the whole contact block — details, hours and a call to action together.
Locate
A locate block pairing the contact details with a styled map placeholder marked by a pin.
Invite
A compact invite on a tinted band: heading and subcopy on the left, a call to action and contact rows on the right.
Hours
A visit-focused split with the contact details on the left beside an opening-hours panel on the right.
Signpost
A compact bar of contact points divided by fine rules, each a small label over its value.
How to choose a contact section
If enquiries need structure — a brief, a budget, a date — a form is worth the friction. If people mostly want to phone or walk in, lead with details and hours instead; a form in front of a phone number is an obstacle. Split layouts let you do both without making either the small print.
At a glance
- Layouts
- 8 distinct contact sections
- Styles covered
- split, details, form, centered, card, grid, tiles, icons
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Contact section FAQ
What should a contact section include?
At least one direct method — phone, email or address — plus opening hours if you have them, and an expected response time. "We reply within one working day" prevents a lot of people from giving up and going elsewhere.
Should I use a contact form or an email address?
A form helps when you need structured details or want to avoid publishing an address. A plain email link is faster for the visitor and works from their own client. Offering both, with the form as the default, suits most businesses.
How many fields should a contact form have?
As few as you can work with — usually name, email and message. Every extra required field costs completions, so anything you can ask in the reply instead should not be on the form.