Skip to content

Design a multi-step form (frontend)

Design a multi-step form for the web, such as signing a business up to take payments: several pages, answers kept across them, checks on each field, and a final submit that must happen once.

System designFrontend and full stackPayments and ledgersMid-levelSenior

What to work through

Work through a multi-step form as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Walk through several pages of questions, forward and back, with progress shown
  • Keep answers across pages, reloads and a break of hours
  • Check each field as the person goes, and again on the server
  • Review everything, then submit once, even if the button is pressed twice or the network drops
  • Show pages that depend on earlier answers, such as the type of business

Constraints to discuss

  • A press of Next or Submit answers within 200 milliseconds
  • Answers survive at least 20 hours with no activity
  • A repeated final submit never creates a second account
  • Usable with a keyboard and a screen reader, each page change announced
  • Information already given is filled in or offered, never asked for again (WCAG 2.2, 3.3.7, level A)
Need a starting point?

Watch for these common gaps as you prepare:

  • Losing answers on Back or on a reload
  • Checking fields only on the final submit
  • Relying on a disabled button to stop a second submit
  • Making a new submit key for each retry, so the retry creates a second account
  • Keeping the step only in component state, so the browser Back button leaves the flow
  • Saving card or identity numbers in the browser
  • Moving to the next page without moving focus or changing the title
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.