How to Build a Multi-Step Form on Bubble.io: The Complete Guide
Multi-step forms are one of the most common Bubble.io requirements and one of the most commonly built incorrectly. A multi-step form that saves progress, validates each step before advancing, and handles conditional branching based on previous answers requires a specific data model and workflow pattern that most beginners get wrong on the first attempt.
The Common Failure Modes
A multi-step form in Bubble.io is an interface pattern that guides the user through multiple screens of questions or inputs, collects their responses, validates each step before allowing progress to the next, and ultimately creates one or more database records from the accumulated responses. The most common failure modes: losing all progress when the user navigates away or the browser refreshes (because the data was stored only in input field states, not in the database); allowing the user to advance past an incomplete step (because validation was not implemented); and breaking the conditional logic when answers on step 2 affect what questions appear on step 3 (because the branching was implemented with show/hide conditions rather than with a state machine approach). SA avoids all three failure modes by following a specific data model and workflow pattern on every multi-step form build.
Data Model and Workflow Pattern
Step 1: Create a FormResponse data type for in-progress responses
Create a FormResponse data type that stores the user’s answers as they progress through the form: user (relationship to User), status (In Progress, Completed, Abandoned), current_step (number), and a field for each form question’s answer. Create the FormResponse record when the user starts the form (on page load or on the first Next button click), not when they complete it. This ensures that progress is saved to the database immediately and is recoverable if the user navigates away.
Step 2: Use a single page with conditional visibility, not separate pages per step
Build the entire multi-step form on a single Bubble.io page, with each step’s content group having a visibility condition: ‘This group is visible when App state’s current_step = [step number].’ Use a custom state (current_step, type number) to track which step is currently displayed. Advancing and retreating between steps changes the custom state value, which shows the appropriate step’s content. This approach is simpler and faster than using separate pages for each step, and it avoids the URL-navigation issues that arise when using separate pages.
Step 3: Validate each step before advancing
Before each Next button advances the step counter, run a validation workflow: check that all required fields for the current step have non-empty values; if any required field is empty, display an error message and do not advance. In Bubble.io, implement this as a conditional on the Next button’s workflow: ‘Only when [required field 1] is not empty AND [required field 2] is not empty.’ Add a separate workflow with no conditions that displays the error message, triggered only when the above conditions are NOT met.
Step 4: Save each step’s answers to the FormResponse record immediately
When the user clicks Next to advance from step N to step N+1, the workflow should: (1) validate the current step; (2) update the FormResponse record with the current step’s answers; (3) update the current_step field on the FormResponse to the next step number; (4) change the custom state to the next step number. This means that at any point, the FormResponse record in the database reflects the user’s most recently saved answers — even if they abandon the form mid-completion.
Step 5: Handle conditional branching with step number logic
For forms where the path depends on previous answers (if the user selects ‘Yes’ on step 2, they see step 3A; if ‘No’, they see step 3B), implement branching as conditional step number assignments: instead of incrementing current_step by 1 unconditionally, set current_step to a specific value based on the current step’s answer. ‘If FormResponse’s answer_2 = Yes, set current_step to 3; if No, set current_step to 5.’ This step-number-based branching is more robust than conditional visibility on step content groups and makes the branching logic explicit and auditable.
🔗 Related reading on sasolutionspk.com
Bubble.io Database Design: The Complete Guide for Founders in 2026
The data model principles that underpin the FormResponse approach — why saving in-progress form data to the database is essential for reliability.
Bubble SaaS Customer Onboarding
How multi-step forms connect to the onboarding flow — the most common context in which a multi-step form is used in a SaaS product.
Q: How do I show a progress indicator for a multi-step form on Bubble.io?
Use a progress bar element whose width is dynamically set based on the current step number: width = (current_step / total_steps) * 100 percent. Display the current step number and total step count as text: ‘Step 3 of 7’. Both the progress bar and the step counter reference the custom state current_step value, which updates automatically as the user advances through the form. The progress indicator is a significant UX improvement for long forms (5+ steps) because it tells the user how much of the form remains and prevents abandonment driven by uncertainty about the form’s length.
Q: Can I allow users to save and return to a multi-step form later?
Yes — this is the primary advantage of the FormResponse data model approach described in this post. Because the user’s progress is saved to a database record after each step, returning to the form on a different day or a different device requires only looking up the user’s most recent in-progress FormResponse record and setting the current_step custom state to the FormResponse’s current_step field value. SA builds resume functionality into every long multi-step form as standard.
Q: How do I handle file uploads in a multi-step form on Bubble.io?
File upload fields in a multi-step form should store the uploaded file’s URL in the FormResponse record immediately when the file is uploaded, not when the form is submitted. Use a workflow triggered by the file uploader’s ‘Value is changed’ event: update FormResponse’s [file field] = Uploading file uploader’s value. This approach saves the file to the FormResponse record in real time, preventing the file from being lost if the user abandons the form before submission.
Ready to Build Your MVP?
SA Solutions builds MVPs in weeks using Bubble.io. Start with a free audit or scope your build in 48 hours with a Discovery Sprint.
