Multi-Step Form

A lead form split into small steps with a progress indicator. Less scary than one big form, same data.

Copied 0 times.

Your name

you@email.com

BackNext

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a multi-step lead form for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A card (max width 480px) containing one step at a time: a step heading, 1-3 fields, and the navigation row (Back link on the left from step 2 on, Next/Submit button on the right).
- Three steps: step 1 asks what the visitor needs, step 2 asks the qualifying details, step 3 collects name and email and submits.
- Progress indicator: a thin progress bar (4-6px) filled to the exact percentage of steps completed, animating smoothly between steps.
- The progress indicator sits at the top of the card and updates as the visitor advances.

FIELDS AND DATA
- Field definitions (label, type, required, step) live in one config array with a clearly marked TODO for my real qualifying questions. Never collect data I do not need: add a comment that every field must earn its place.
- The final step's submit hands the collected object to my backend or CRM; leave a clearly marked TODO where that call goes, with the payload shape typed.

BEHAVIOR
- Next validates only the current step's fields; errors show inline under the field, and focus moves to the first invalid field.
- Back never loses entered data; all state lives in one form-state object.
- Step transitions animate with a quick slide/fade (150-200ms); respect prefers-reduced-motion by snapping.
- The card keeps one consistent height per step change without jumping: animate height smoothly or reserve the max step height.
- No data is stored anywhere before the final submit.

QUALITY
- Semantic form markup: real labels tied to inputs, fieldset per step where fields are related, button type="button" for Next/Back and type="submit" only at the end.
- The progress indicator carries text for screen readers ("Step 2 of 3"), not just visuals.
- Keyboard operable end to end; visible focus rings; WCAG AA contrast; inputs at least 44px tall.

QUESTIONS
- Before you build, find or ask for: my real qualifying questions and where the submissions go (backend or CRM). Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

A long form scares people off; the same questions in small steps don't. The multi-step form asks two or three little screens' worth, with a progress marker on top telling people they're nearly there. It collects the same info as one big form, minus the scary first impression.

Going back never loses what someone typed.
Mistakes get flagged kindly on the spot, only for the screen they're on.
Nothing is sent anywhere until the final button.
The card stays one steady size between steps instead of jumping around.
A note in the code insists every field earns its place; extra questions cost finished forms.
Screen readers hear the progress too.

How it works

1Pick 2 or 3 steps, then how progress shows: dots, a thin filling bar, or a simple step 2 of 3 label.
2Copy the prompt, a complete build plan in plain text, into whichever AI you use.
3Write your real questions into the marked list, deciding which step each belongs to; name and email always close the show.
4Connect the final submit at the marked spot, so finished forms land wherever you track your leads.
5Walk through it once yourself: skip a required field to see the friendly error, then go back and check nothing you typed disappears.
6Check that Next only checks the current screen, so nobody gets scolded for a question they haven't seen yet.

What you can customize

How many steps: two means qualify then contact info; three splits what they need from the finer details before asking who they are.
Progress style: dots are minimal, the bar visibly fills as they move, and the text label just says step 2 of 3 in plain words.
Field styles, buttons, and colors adapt to your site automatically, because your AI builds the form right inside your own design.