Contact Section With Dashed Grid Form
ProDashed 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
- 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
- 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

