Stepper forms: making a sixty-field form feel short

Some forms are long because the business genuinely needs the data: hospital enrolment, KYC, ERP records. You can't delete fields to make them shorter. What you can change is how long they feel.

Across a few projects I've turned single-page monster forms into guided stepper flows. Here's the playbook.

Group by the user's mental model, not the database

The first draft of every stepper mirrors the tables: Personal, Address, Medical, Documents. That's how engineers see it. Users think in terms of tasks: "tell us who you are," "check you can donate," "pick a time."

Rename the steps after what the user is doing, and keep each one to a single screen without scrolling where possible. Five to seven fields per step is a good default.

Validate one step at a time

Nothing is more deflating than reaching the end and being sent back to step two. Validate each step before moving forward, and only that step.

With React Hook Form, trigger accepts a list of field names, which makes per-step validation tidy:

const steps = [
  { title: "About you", fields: ["name", "dob", "phone"] },
  { title: "Eligibility", fields: ["weight", "lastDonation", "conditions"] },
  { title: "Pick a slot", fields: ["hospitalId", "slot"] },
] as const;
 
async function next() {
  const ok = await form.trigger(steps[current].fields);
  if (ok) setCurrent((c) => c + 1);
}

One schema for the whole form still runs on submit, so nothing slips through if someone deep-links into a later step.

Show progress honestly

A progress indicator is a promise. Number the steps, show the total, and never add surprise steps based on earlier answers without updating the count. If a branch adds a step, show it as soon as the branching answer is given.

Save as you go

Long forms get interrupted — a call, a lost signal, a missing document. Persist the draft after every step (locally, or server-side if the data is sensitive) and restore it on return. "Pick up where you left off" turns an abandoned form into a delayed one.

Make the last step a review

Before submitting, show everything on one screen with an edit link per section. It catches mistakes, and it gives people a moment of confidence right before the commitment.

The takeaway

Users rarely mind effort when the effort feels purposeful and under control. A good stepper doesn't make the form shorter — it makes every screen feel finishable, and that's what gets the last button pressed.