# How to build multi-step forms in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
MULTI-STEP FORM — WORKFLOW SUMMARY
====================================

PAGE SETUP
  Custom States:
    - current_step (number, default: 1)
    - current_submission (FormSubmission)

  Groups: Step 1, Step 2, Step 3, Step 4
    Visibility: When current_step = step number
    Collapse when hidden: Yes

PROGRESS INDICATOR
  Row with 4 circle elements
  Conditional: current_step >= N → accent color, else gray

WORKFLOW: Next (Step 1)
  Trigger: Button Next clicked
  Only when: current_step is 1 AND Name not empty AND Email not empty
  Step 1: Create FormSubmission with name, email, status step1
  Step 2: Set state → current_submission = Result of step 1
  Step 3: Set state → current_step = 2

WORKFLOW: Next (Step 2)
  Only when: current_step is 2 AND Company not empty
  Step 1: Make changes to current_submission (company, role)
  Step 2: Set state → current_step = 3

WORKFLOW: Next (Step 3)
  Only when: current_step is 3
  Step 1: Make changes to current_submission (preferences)
  Step 2: Set state → current_step = 4

WORKFLOW: Submit (Step 4)
  Step 1: Make changes → form_status = complete
  Step 2: Go to page → confirmation

WORKFLOW: Back
  Step 1: Set state → current_step = current_step - 1
```

## Common mistakes

- **Not enabling Collapse when hidden on step groups** — Without collapse, hidden groups still occupy vertical space, creating large empty gaps. Fix: Enable Collapse when hidden in the Layout section of each step group's Property Editor.
- **Using separate pages instead of custom states** — Page navigation resets input values and requires passing data between pages. Fix: Use a single page with custom states to toggle group visibility. All input values stay in memory.
- **Not saving partial data between steps** — If the user refreshes or their browser crashes, all entered data is lost. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/handle-multi-step-forms-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/handle-multi-step-forms-in-bubble