Contact Section With Three Column Form
ProContact 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
- Category
- Contact Sections
- 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

