Contact section design patterns

A contact section is the place a site answers a simple question: how do we talk? It can sit on a dedicated page, close a landing page, or live near the footer. Its job is to make the next step obvious, whether that is sending a message, writing an email, visiting a space, or choosing the right office. The collection shows how wide that job can be. Some sections are almost nothing: a large email and a line of context. Others are full inquiry forms with routing fields. Places that people actually visit pair addresses with hours, maps, or photography. Multi-office brands list cities instead of a single inbox. Invitation-led layouts skip the form entirely and send people onward with a headline and a button. Useful variation is less about decoration and more about intent. A studio can stay personal. A venue needs hours. A sales team needs qualification. The strongest examples pick one primary action and keep everything else from competing with it.

107 published examples

Hero

888

Get weekly top sections delivered to your inbox, every monday. No spam, only inspiration.Unsubscribe anytime.

Glyphic Biotechnologies

Contact design patterns to explore

Invitation banners and named people

These sections sell the conversation before they collect anything. A headline, a short promise, and a button or named contact do the work. They fit brands that want warmth more than intake.

Direct email and social lists

The contact method is the interface. A large address, a reply promise, or a short stack of roles and socials keeps the path short for studios and independents.

Places, hours, and visit details

When the destination is physical, the section behaves like wayfinding. Address, hours, phone, and a photo or map sit together so a visitor can decide whether to come.

How to design a Contact section

In review I look first at the promised action, then at how much work it asks for. A giant email with a reply-time note can outperform a ten-field form if the brand is small and the inbox is real. A long form only earns its keep when someone on the other side will actually route by inquiry type, country, or need. Watch contrast and tap targets on overlay cards. Photography behind a location card looks rich until the address, phone, and hours start to compete with the building. If people need to visit, hours and a directions action matter more than atmosphere. If they need to write, the email or submit control should be the loudest object on the screen. One pattern I keep seeing is the invitation that never names the channel. “Get in touch” is fine as a headline, weak as the only instruction. Pair it with an email, a form, or a named person. Also test the empty state of every field: stacked labels, required marks, and a submit that still reads after a keyboard is open. Forms fail quietly when the last field and the button collapse into the same visual weight. Trade the extra field for a clearer promise. If you would not use the answer this week, do not collect it.

Contact design questions

When is a form better than publishing an email?

Use a form when messages need routing, legal consent, or a shared inbox. Publish an email when one person will answer and speed matters. If the form only recreates an email with extra fields, the extra friction rarely pays off.

What should a location-led contact section include?

Give people enough to arrive: address, hours, and one action such as directions or a phone number. A photo helps only if the type stays readable on top of it. Skip the map pin theater if the hours are missing.

How do you keep a contact CTA from feeling empty?

Name the next step in the control or the line beneath it. “Contact us” needs an email, a person, or a form destination. A reply-time note or a visible address makes the invitation feel staffed instead of decorative.