Form with Contact Methods Grid

Contact 9Pro

A two-column contact section with a form and terms checkbox on the left, and a grid of contact method cards with icons on the right.

Shadcn UI Contact Block

Contact9 has a header with a badge, large headline, and description, followed by a two-column layout. The left column contains a form with name, email, message textarea, terms checkbox, and submit button. The right column displays three contact method blocks in a two-by-two grid (with one spanning): Email, Phone, and Office. Each block has an icon next to the title, a description, and the contact detail or link.

Clean white background with bordered inputs. The badge uses an outlined style with an icon. Contact method blocks are unstyled text groups with icons positioned inline with titles. The office block includes a chevron link for directions. Inputs have a subtle card background for contrast. Simple, functional styling without decorative elements.

A balanced layout that gives equal weight to the form and contact information. The terms checkbox adds formality suitable for business contexts. The contact grid makes alternative contact methods clearly visible alongside the form.

Dependencies

PackageType
@hookform/resolversNPM
lucide-reactNPM
reactNPM
react-hook-formNPM
zodNPM
badge
@shadcn
Registry
button
@shadcn
Registry
checkbox
@shadcn
Registry
field
@shadcn
Registry
input
@shadcn
Registry
textarea
@shadcn
Registry