Figma contact page examples

By the time someone opens your contact page they have already decided to talk to you. The page has one job left, which is not to lose them. Every extra required field, every missing phone number, every form that swallows a message without confirming it landed is a chance for that decision to come undone. Support entry points, sales enquiries, agency briefs and press requests all funnel through here, and they need different things from the same page.

A form is a supplement, not a replacement

Nielsen Norman Group's Contact Us guidelines are unusually direct about this: never hide or remove real contact details in favour of a form, keep forms short, and tell people when to expect a reply. The layouts here follow that.

The split header pairs a 720px image with a 480px form and prints an email address in the supporting line directly under the heading, so the form is an option rather than a toll gate. If your only route to a human is a form with a required company size field, you have built a lead capture page and labelled it contact.

What goes in the form

The fullest version in this set runs a first and last name row of two 224px input fields, two more full width input fields, a 160px message textarea, then a labelled group of six checkboxes in two columns for what the enquiry is about, and a full width 480px submit button.

Six topic checkboxes are more than a general enquiry needs, and they earn their place only when the answer actually routes the message to a different inbox. Whatever you keep, keep the visible labels: the W3C WAI tutorial on labels covers why placeholder text alone fails, and it fails hardest on the page where people are already slightly annoyed.

From one section to a whole page

The examples scale from minimal to complete. One is a single contact section on its own, no navigation, no footer, ready to be dropped into an about page or a landing page that needs a way to get in touch without a route of its own.

Others build up: a contact page header, a form, then a grid of six contact methods laid out in two columns, then a newsletter block and a footer. Splitting the methods out matters more than it looks, because a person who wants the sales team should never have to describe themselves in a free text box first. The reusable pieces behind all of this live in the contact sections.

Desktop, mobile, light, and dark

Each layout comes as a 1,440px desktop page and a 375px mobile version, and the entire set is duplicated in dark mode. The mobile forms are worth a close look before you sign off: a two field name row that sits comfortably at 224px each on desktop stacks on a 343px column, and a form that felt short on a laptop can turn into a long scroll on a phone.

That is usually the moment a required field gets cut, which is the correct outcome. The submit button helps here: at 480px it already runs the full width of the desktop form column, so the mobile version keeps that behaviour and stays reachable with a thumb instead of floating half width in the middle of the screen.

When the page is built, Untitled UI React contact pages are open source, built with Tailwind CSS and React Aria, with labelled, accessible form fields and validation states already wired up.