React Multi-Step Lead Form
Eleven fields on one screen loses most of the people who would happily have given you three. The same questions split across short steps — easiest first — convert far better, because each screen only asks for what it has already earned.
Step 1 of 3
0%
Let's start with you
Two fields. We'll ask the harder questions once we know it's worth your time.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| steps | FormStep[] | { id, title, description?, fields } |
| submitLabel | string | Final button label |
| onSubmit | (values: Record<string,string>) => void | Receives every collected value |
FormField is { name, label, type, required?, placeholder?, help?, options?, validate? } with types text, email, select, radio, and textarea.
Validate the step, never the form
Validation runs against the current step only. Validating the whole form on every advance would flag fields the user has not been shown yet — the single most common way these forms feel broken. Errors clear as soon as the offending field is edited, rather than waiting for another submit.
Order the steps by decreasing willingness to answer: identity first, qualification second, free text last. Everything after step one is a bonus — if someone abandons at step three you still captured a name and an email, which a single monolithic form would have lost entirely. That is the actual mechanism behind the completion lift, and it only works if you treat the early steps as the real prize.
For a linear process with sign-off rather than a lead form, use Stepper; for an ordered operating procedure, Runbook Checklist.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.