Contact Section With Dashed Grid Form

Pro

Dashed frame contact form with pill name and email fields, topic and team dropdowns, a desk portrait beside the message box, a docs link, and a yellow send action. Follows light and dark.

When to use Contact Section With Dashed Grid Form

Use this when the contact band should feel like a desk window, not a chat log. A dashed lane runs to the corners of the section and fades out at the ends. Name and email sit in pill fields. Topic and team are dropdowns. The message is a larger rounded box with a desk face on the left. The amber Send message control is the only saturated colour, and it submits the form.

Skip it if you still need an accordion of canned replies. This block takes a name, an email, and a note. Wire onSubmit to your inbox. Swap the portrait, the docs href, and the placeholder copy before production. Keep the dashed rules. Removing them turns this into a generic stacked form and it stops reading as a window you can walk up to.

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
279 lines, 11 KB in one file
Install
wensity add contact-section-with-dashed-grid-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, dashed, cta
Last updated

More contact sections