Contact Form with Info Cards and Hours

Contact 6Pro

A comprehensive contact section with stacked info cards, a validated form with terms checkbox, and an office hours footer panel.

Shadcn UI Contact Block

Contact6 is a feature-rich contact section with three parts: contact info cards on the left, a submission form on the right, and an office hours panel at the bottom. The left column has four stacked cards for Email, Live Chat, Phone, and Office, each with an icon, description, and link. The form includes first name, last name, email, company, message, and a terms checkbox. The footer spans full width with office hours and contact summary in a two-column layout.

Muted background cards without borders or shadows. Icons are enclosed in rounded backgrounds. The form card has no visible border but uses Card components for structure. A horizontal separator divides the main content from the office hours section. Success and error states show colored alert boxes. Loading state displays a spinning animation in the submit button.

Comprehensive and detailed with multiple contact options clearly presented. The terms checkbox adds formality while the office hours panel provides practical scheduling information. More elaborate than simple forms but maintains a clean appearance through consistent card styling.

Dependencies

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