Contact Section With Three Column Form

Pro

Contact section with intro copy on the left, a centered underline form card, and stacked sales, office, and phone links. Follows light and dark.

When to use Contact Section With Three Column Form

Use this when the last screen has to take a written brief and still name a person. The left column is the ask. The middle is a white card with underline fields for name, email, industry, subject, and a longer message. Headphones sit beside We're listening. Submit is a black pill that spans the card. Sales, the office, and a phone number sit against the card, each with a mailto or tel link.

Skip it when those inboxes are not staffed, or when a live calendar is the only honest next step. Empty hashes under Talk to sales are a brochure. The demo uses rune.codes mailboxes, a Howard Street office, and a 555 number. Replace the heading, the placeholders, the address, and every href before production. Keep the underlines. Boxed inputs turn this into a generic form card. The section follows light and dark.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
284 lines, 9 KB in one file
Install
wensity add contact-section-with-three-column-form --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, contact, form, three-column, support
Last updated

More contact sections