How to Build a Multi-Step Form and Wizard in Bubble.io
Multi-step forms reduce drop-off, improve data quality, and handle complex conditional logic that single-screen forms cannot. This guide covers state management, validation, skip logic, progress tracking, and UX best practices for wizards in Bubble.
Single Screen vs. Multi-Step — When Each Is Right
Single-screen forms work for simple data collection: a name, email, and one or two fields. Multi-step wizards work for anything complex: onboarding flows, application forms, checkout sequences, configuration wizards, and intake forms with conditional branching. The rule of thumb: if completing the form requires more than 5 inputs or involves decisions that change what questions appear next, use a multi-step wizard.
Building a Multi-Step Wizard in Bubble — The Complete Pattern
State Management for Form Steps
State: form_step (number, default 1)
State: total_steps (number, default 4)
// One group per step — visibility controlled by state
Step 1 group visible when: form_step = 1
Step 2 group visible when: form_step = 2
Step 3 group visible when: form_step = 3
Step 4 group visible when: form_step = 4
// Progress bar width
Progress bar width: form_step / total_steps * 100%
Step counter text: Step [form_step] of [total_steps]
Validation Before Advancing
Next button click:
Step 1: Only when form_step = 1
AND Company Name Input is not empty
AND Industry Dropdown’s value is not empty
Step 2: Set Page’s form_step = form_step + 1
// Show validation error if conditions fail
Validation error group visible when:
form_step = 1 AND (Name is empty OR Industry is empty)
Saving Progress to the Database
// Save at end (simpler — good for short forms)
Submit button (Step 4):
Create Record with all field states collected across steps
// Save incrementally (better UX — form survives page refresh)
On Next click (Step 1):
Create DraftApplication: step1_data, user, status=Draft
Store DraftApplication ID in URL parameter
On Next click (Step 2):
Update DraftApplication: step2_data
// On page reload: read URL param, load draft, restore form_step
Conditional Steps (Skip Logic)
// If user selects “Individual”, skip to Step 3
Next from Step 1:
When account_type = Company: set form_step = 2
When account_type = Individual: set form_step = 3
// Store account_type in a custom state from Step 1 input
// Progress bar adjusts: for Individual, total_steps = 3, not 4
Multi-Step Form UX — The 6 Rules
Always show a progress indicator
A progress bar or “Step 2 of 4” counter eliminates the biggest anxiety in multi-step forms: users not knowing how much further they have to go. Without it, form abandonment spikes at step 2.
Put the hardest questions last
Start with the easiest, least invasive questions (name, company). End with harder ones (payment, legal agreements). By the time users reach the difficult questions, they have already invested effort in the earlier steps — they are far less likely to abandon.
Allow going back without losing data
The “Back” button must restore the previous step’s values. Store all form inputs as custom states at the Page level — they persist as the user navigates between steps. Never reset states on Back.
Validate inline, not on submit
Show field-level validation errors as soon as the user moves focus away from a field, not when they click Next. This catches mistakes immediately and reduces the frustration of advancing and being told to go back and fix something.
Show a summary before final submit
The final step should be a read-only summary of all entered information before the actual submit action. This catches user errors and increases confidence that the form will be submitted correctly.
Handle the mobile layout explicitly
Multi-step forms often feel cramped on mobile. Set explicit column layouts for each step group. Large touch targets for Next/Back buttons. Input field font size minimum 16px to prevent iOS zoom. Test every step on a real phone before launch.
Ready to Build on Bubble?
Architecture, data model design, Stripe billing, and full SaaS builds — done right from day one.
