How to build multi-step forms in Bubble

The simplest and most reliable way to build a multi‑step form in Bubble is to put each step inside its own Group (all on the same page) and then show/hide those Groups as the user progresses. You store the user’s answers in custom states or save them directly to the database as each step is completed. This avoids page reloads and gives you full control over validation, conditional logic, and progress UI.

Core Structure

You create a parent container (usually a Group or Floating Group), and inside it place separate Groups like “Step 1”, “Step 2”, “Step 3”. Only one Group is visible at a time. Buttons like “Next” or “Back” trigger Show and Hide actions or adjust a custom state that controls visibility.

• Each step’s Group contains its own Inputs.
• You can validate fields by checking “Input’s value is empty” in workflow conditions.
• Use a custom state like current\_step to manage the navigation logic.

Step-by-step Practical Setup

Create a custom state on the main container, for example: Type: number, Default: 1. Set each Step Group to “This element is visible only when current\_step = X”. Buttons update this state.

• For “Next” button: set custom state current_step = current_step + 1.
• For “Back”: set current_step = current_step - 1.
• For validation: add a workflow condition like Only when Input Email’s value is not empty.

// Example: workflow action on "Next" button
// Element: ParentGroup
// Custom state: current_step

Set state: 
  Element = ParentGroup
  Custom state = current_step
  Value = ParentGroup's current_step + 1

Saving Data

You can store answers in a temporary “Thing” (e.g., a Draft Submission) that you Create at Step 1 and then update with “Make changes to a thing” at each step. Or keep everything in custom states and save once at the final step. Both are valid; saving early is safer if the form is long.

• To save progressively: create the Thing once, then update fields each step.
• To save at the end: collect values in custom states and create the Thing when the user submits.

Final Tips

Hide/show Groups is the stable and most used pattern in real Bubble apps. It avoids page refresh, works perfectly with conditions, and simplifies design alignment. Always test each step's validation and confirm the visibility logic before styling.