Figma marketing website contact sections

Most contact sections exist because the page above them raised a question it could not finish answering. Pricing that stops before enterprise numbers. A help article that misses your exact case. An about page that leaves someone wondering whether there is a person behind it. Dropping the contact block at the end of that page catches the reader while they still care, which a link to a separate destination does not reliably do.

Four fields, a message box, and a button

That is the shape of the simple form layouts, and it is close to the ceiling. The form sits in a 480px column inside the 1,440px frame: first and last name paired at 224px each, two full width inputs under them, a 160px message area, a consent checkbox, then one full width button at 48px.

NN/g's recommendations for form usability are blunt about the trade, since every field you remove lifts completion, and they cap the optional ones at two. Add a company size dropdown and a "how did you hear about us" and you have built a lead capture form wearing a contact label.

Keep a visible label above each field instead of letting a placeholder stand in for one, because the placeholder disappears the moment someone types and takes the question with it. The W3C's guidance on labelling controls covers what that costs beyond tidiness.

The routes that are not a form

Half of this set never asks anyone to type. The contact text block comes as plain text, an icon above the label, an icon beside it, or a featured icon inside a bordered box or card, at 384px wide on desktop and 343px on mobile. Simple icons 01 lays three of those across the 1,216px content area with 32px gutters and stops at 384px of total height: sales, support, press, done.

The icon card layouts give each method a bordered card when the section has to carry more weight, and the icons and form layouts run both at once, methods on the left and the form on the right, which is the arrangement most contact pages settle on. Printing the email address beside the form makes the form more likely to be used, not less.

Maps, and whether the section needs one

There are two ways to show a location here: a Google Maps mockup at 720 by 400, or a vector map at 1024 by 488 with its own 40px location marker that carries a hover state. The tabs map layouts pair either one with a tab row, so a single section holds three offices without three maps.

Ask first whether anyone visits. A map earns its height when people physically turn up, and if your address exists mainly to satisfy the registered office line, three lines of text do the same job in a tenth of the space.

Themes, breakpoints, and where the section lands

Every layout is drawn at 1,440px and 375px, and the whole file exists twice over, once light and once dark. The icon led layouts also carry a brand theme that fills the section with your primary color, worth using once on a page rather than three times.

In practice these sections sit under FAQ sections on support pages and above footers on marketing pages. The forms are assembled from the same input fields as the rest of the kit, so restyling one input restyles every contact form you have drawn.

These sections have a coded counterpart. Untitled UI React contact sections are open source, built with Tailwind CSS and React Aria, with label association, focus order, and error messaging on the fields handled for you.