Break long forms into manageable steps using custom states to control group visibility in Bubble. This tutorial shows you how to build a multi-step wizard form with a progress indicator, per-step validation, navigation buttons, and partial data saving so users never lose their progress.
Overview: Building Multi-Step Forms in Bubble
Long forms with many fields overwhelm users and increase abandonment. Breaking them into steps — showing one section at a time with a progress bar — makes the experience manageable. This tutorial uses custom states to toggle group visibility, creating a wizard-style form with Back and Next buttons, step validation, and data persistence.
Prerequisites
- A Bubble account with an app ready to edit
- Basic understanding of Groups, Input elements, and workflows
- Familiarity with custom states
- A Data Type to store the form submissions
Step-by-step guide
Plan your form steps and create the data model
Plan your form steps and create the data model
Decide how to split your form. For example, a registration form might have Step 1 (Personal Info), Step 2 (Company Info), Step 3 (Preferences), Step 4 (Review and Submit). Create or update your Data Type with all the fields needed across all steps. Add a field called form_status (text) to track completion.
Expected result: A clear plan of 3-5 form steps and a Data Type with all required fields.
Build the step container groups
Build the step container groups
On your form page, add a custom state to the page called current_step (type: number, default value: 1). Create a Group for each step: Group Step 1 through Group Step 4. Place all groups in the same position inside a parent Column group. On each group, set a Conditional: When page's current_step is the step number, This element is visible equals yes. Set default visibility of all groups except Step 1 to not visible. Enable Collapse when hidden on each group.
Pro tip: Put all step groups inside a single parent Column group so they stack neatly when collapsed.
Expected result: Only Group Step 1 is visible on page load. Changing current_step shows the corresponding group.
Add the progress indicator
Add the progress indicator
Above the step groups, add a Row group containing four circle elements (one per step) with step numbers inside. Use conditional formatting: When current_step is greater than or equal to this step's number, set Background color to your accent color. When current_step is less than this number, set it to gray. Add connecting lines between circles for a classic progress bar.
Expected result: A visual progress bar that highlights completed and current steps.
Add Next and Back navigation buttons
Add Next and Back navigation buttons
Below the step groups, add a Row with Back and Next buttons. Create workflows: When Next is clicked, set current_step to current_step plus 1. When Back is clicked, set current_step to current_step minus 1. Add conditions: Hide Back on Step 1. Change Next text to Submit on the last step using a conditional.
Expected result: Next advances, Back returns, and buttons adapt at the first and last steps.
Add per-step validation before advancing
Add per-step validation before advancing
On the Next button workflows, add Only when conditions to validate each step's inputs. For Step 1: Only when current_step is 1 and Input Name is not empty and Input Email is not empty. Create separate workflows for each step's validation. If validation fails, show an alert or error message. Only advance when validation passes.
Pro tip: Use conditional formatting on input borders (red when empty after clicking Next) to highlight missing fields visually.
Expected result: Users cannot advance past a step without filling required fields.
Save partial data and submit on the final step
Save partial data and submit on the final step
To prevent data loss, save at each step. On the Next workflow for Step 1, Create a new FormSubmission with the Step 1 fields and store it in a custom state called current_submission. On subsequent steps, use Make changes to current_submission. On the final Submit, update form_status to complete and navigate to a confirmation page.
Expected result: Form data saves progressively at each step. Even if the user leaves, progress is stored.
Complete working example
1MULTI-STEP FORM — WORKFLOW SUMMARY2====================================34PAGE SETUP5 Custom States:6 - current_step (number, default: 1)7 - current_submission (FormSubmission)89 Groups: Step 1, Step 2, Step 3, Step 410 Visibility: When current_step = step number11 Collapse when hidden: Yes1213PROGRESS INDICATOR14 Row with 4 circle elements15 Conditional: current_step >= N → accent color, else gray1617WORKFLOW: Next (Step 1)18 Trigger: Button Next clicked19 Only when: current_step is 1 AND Name not empty AND Email not empty20 Step 1: Create FormSubmission with name, email, status step121 Step 2: Set state → current_submission = Result of step 122 Step 3: Set state → current_step = 22324WORKFLOW: Next (Step 2)25 Only when: current_step is 2 AND Company not empty26 Step 1: Make changes to current_submission (company, role)27 Step 2: Set state → current_step = 32829WORKFLOW: Next (Step 3)30 Only when: current_step is 331 Step 1: Make changes to current_submission (preferences)32 Step 2: Set state → current_step = 43334WORKFLOW: Submit (Step 4)35 Step 1: Make changes → form_status = complete36 Step 2: Go to page → confirmation3738WORKFLOW: Back39 Step 1: Set state → current_step = current_step - 1Common mistakes when building multi-step forms in Bubble
Why it's a problem: Not enabling Collapse when hidden on step groups
How to avoid: Enable Collapse when hidden in the Layout section of each step group's Property Editor.
Why it's a problem: Using separate pages instead of custom states
How to avoid: Use a single page with custom states to toggle group visibility. All input values stay in memory.
Why it's a problem: Not saving partial data between steps
How to avoid: Save form data to the database at each step transition.
Best practices
- Keep each step to 2-4 input fields to avoid overwhelming users
- Save partial data at each step transition for data safety
- Use a visual progress indicator so users know how many steps remain
- Validate inputs per step rather than only at final submission
- Show clear error messages next to specific fields that need attention
- Add a Review step at the end that displays all entered data
- Use conditional formatting to highlight required empty fields
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a multi-step registration form in Bubble.io with 4 steps: personal info, company info, preferences, and review. Each step should validate before proceeding. How do I structure this with custom states and save partial data?
Create a multi-step form on my registration page. Add a custom state current_step (number). Create four groups with visibility conditions. Add Next/Back buttons that validate inputs before advancing the step counter.
Frequently asked questions
Can I have different numbers of steps for different user types?
Yes. Use conditional logic on the Next button to skip steps based on user selections in earlier steps.
How do I let users return later and continue?
Save partial data with a form_status field. When the user returns, search for their incomplete submission and pre-fill the inputs.
Can I animate the step transitions?
Yes. Add a transition (e.g., fade) on the visibility property in each group's Appearance tab. Steps will animate in and out.
How many steps should my form have?
Keep it under 5 steps. Abandonment increases significantly beyond 4-5 steps. Group related fields within steps rather than adding more steps.
Should I use a multi-step form or a single long form?
Multi-step works better with 8+ fields, conditional logic, or partial data saving. For 4-6 fields, a single page is simpler.
Can RapidDev help build complex multi-step forms?
Yes. RapidDev can build sophisticated forms with conditional branching, file uploads per step, real-time validation, and external service integration.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation