TechnicalCollectible prompt
Multi-step form wizard that saves progress
Act as a senior product engineer. Turn {{page_or_feature}} into a multi-step wizard in my {{tech_stack}} project, collecting {{data_to_store}}. Reuse existing form components and validation library. Show me the step plan before building.
Steps:
- 3 to 6 steps, grouped by topic, asking only what's needed now
- conditional steps skip cleanly and the step count updates
- each step has its own URL, so Back, refresh and deep links work
- a final Review step lists every answer with an Edit link back to its step
Progress: an ordered list of steps with aria-current="step" and a heading like "Step 2 of 4: Business details". 360: a compact "2 of 4" with a thin bar; 768 and 1280: full step labels. Completed steps are clickable; future ones aren't.
Saving:
- save a draft to the server after each step (or locally for signed-out users, with a note saying so), and show "Saved 2 minutes ago"
- a resume link, plus a "Continue where you left off" prompt on return
- never ask for the same information twice (WCAG 2.2 redundant entry); prefill what we know
- warn before any session timeout and let people extend it
Validation: per step on Next, then on blur for fields already touched; an error summary at the top with links to each field, focus moved to it; the server validates everything again on submit.
Submit: idempotent with an idempotency key; button disabled with a spinner while sending; success page with a reference number; a failure keeps everything and offers Retry.
Layout: form max 640px, labels above fields, inputs 48px tall at 16px text; at 1280 an optional summary sidebar of 4 columns. Back on the left, Next on the right; stacked full width at 360 with Next on top.
Focus moves to the step heading on each change.
Motion: 200ms cross-fade between steps; none under prefers-reduced-motion.
Avoid: a progress bar that lies, a disabled Next with no reason, losing answers on refresh, putting every field on step one.
Technicalnvoka.com/library/nvoka-multi-step-form-wizard-that-saves-progressScan to open
Technical
Multi-step form wizard that saves progress
A long form split into clear steps, with per-step checks, saved drafts, a review page and safe submit.
Curated by Nvoka
LovableCursorClaude CodeBolt
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 3 filledYour prompt
Act as a senior product engineer. Turn {{page_or_feature}} into a multi-step wizard in my {{tech_stack}} project, collecting {{data_to_store}}. Reuse existing form components and validation library. Show me the step plan before building.
Steps:
- 3 to 6 steps, grouped by topic, asking only what's needed now
- conditional steps skip cleanly and the step count updates
- each step has its own URL, so Back, refresh and deep links work
- a final Review step lists every answer with an Edit link back to its step
Progress: an ordered list of steps with aria-current="step" and a heading like "Step 2 of 4: Business details". 360: a compact "2 of 4" with a thin bar; 768 and 1280: full step labels. Completed steps are clickable; future ones aren't.
Saving:
- save a draft to the server after each step (or locally for signed-out users, with a note saying so), and show "Saved 2 minutes ago"
- a resume link, plus a "Continue where you left off" prompt on return
- never ask for the same information twice (WCAG 2.2 redundant entry); prefill what we know
- warn before any session timeout and let people extend it
Validation: per step on Next, then on blur for fields already touched; an error summary at the top with links to each field, focus moved to it; the server validates everything again on submit.
Submit: idempotent with an idempotency key; button disabled with a spinner while sending; success page with a reference number; a failure keeps everything and offers Retry.
Layout: form max 640px, labels above fields, inputs 48px tall at 16px text; at 1280 an optional summary sidebar of 4 columns. Back on the left, Next on the right; stacked full width at 360 with Next on top.
Focus moves to the step heading on each change.
Motion: 200ms cross-fade between steps; none under prefers-reduced-motion.
Avoid: a progress bar that lies, a disabled Next with no reason, losing answers on refresh, putting every field on step one.