Skip to main content
Version: Divi 5

Build a Multistep Form (Divi 5)

A multistep form splits a long form into steps so users fill out one section at a time. In Divi 5, you enable multistep and add Form Step fields in the Form module’s Content tab.

Step 1: Add the Form module​

Add the Form module to your layout in the Divi 5 Visual Builder.

Step 2: Enable multistep​

  1. Select the Form module.
  2. In the Content tab, open Multistep Options (or the equivalent section).
  3. Set Enable Multistep to Yes.

Additional multistep options (transition, progress bar, navigation) appear below.

Step 3: Add a Form Step field​

  1. Add a new form field.
  2. Set Type to Form Step. This should be the first field.
  3. Set a Field Title (e.g. “Step 1”). You can show step titles in the progress bar via Form settings → Multistep Options.

Step 4: Add fields for the first step​

Add the fields that belong to the first step (input, email, etc.) below the first Form Step field.

Step 5: Add more steps​

Add another Form Step field to start the second step, then add its fields. Repeat for further steps.

Multistep options (Form settings)​

In the Form module’s Content tab under Multistep Options you can set:

  • Form Transition Effect — e.g. FadeIn, ScaleIn, SlideHorz, SlideVert.
  • Form Transition Effect Speed — In milliseconds.
  • Progress Bar Style — None, Basic, Lollipop, Step.
  • Progress bar options — Show percentage, step number in circle, step icon, step title.
  • Navigation — e.g. go to next step on Enter.

Verify it works​

  1. Open the form on the front end and move through every step.
  2. Confirm next/previous navigation works and step order is correct.
  3. Submit a final test entry and confirm full data is saved/sent.

Common issues​

  • Missing Form Step separators can merge fields into the wrong step.
  • Required fields in hidden steps can block progression if placement is incorrect.
  • Step labels can appear inconsistent if step titles are empty.

What's Next​