Multi-Step Contact Form

Contact 28Pro

A three-step contact wizard with vertical progress list, per-step Zod validation, and full-page success state on a muted background.

Shadcn UI Contact Block

Contact28 is a three-step contact wizard on a full-viewport muted background. A two-column layout shows the progress on the left and the form card on the right. The progress area displays a large headline and three vertical step items that highlight as completed. The form card contains the current step's fields, with navigation buttons at the bottom.

Step 1 collects inquiry type dropdown and optional budget. Step 2 gathers name, email, company, and phone. Step 3 has a message textarea. Each step validates its own fields before allowing progression. The form card uses white background with shadow on the muted section background.

Immersive full-viewport design that feels like a standalone page rather than a section. The vertical progress list provides clear context of where the user is in the process. The chunked approach reduces cognitive load for longer forms. After submission, a full-page success state with large checkmark icon replaces the form.

Dependencies

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