Skip to main content

Multi-Step Forms

Multi-step forms (also known as wizards) allow you to organize your form into multiple pages, making long forms more manageable and improving the user experience.

Benefits of Multi-Step Forms​

Multi-step forms offer several advantages:

  • Improved user experience for long forms
  • Logical grouping of related fields
  • Progress indication for users
  • Conditional page navigation based on user inputs
  • Reduced cognitive load by presenting information in manageable chunks

Creating a Multi-Step Form​

To create a multi-step form:

  1. When creating a new form or editing an existing form, select "Multi-Step Form" in the Type dropdown
  2. Use the Page component from the sidebar to create new pages
  3. Drag components onto each page
  4. Configure navigation buttons between pages
  5. Set page titles and descriptions

Page Component​

The Page component is the foundation of multi-step forms. Each Page component represents a separate step in the form. To add a Page component:

  1. Locate the Page component in the Layout Components section of the sidebar
  2. Drag it onto the form canvas
  3. Configure the page settings:
    • Title: The name of the page (displayed in the progress indicator)
    • Key: Unique identifier for the page
    • Description: Additional information about the page
    • Next Button Label: Text for the button that advances to the next page
    • Previous Button Label: Text for the button that returns to the previous page

Multi-step forms automatically include navigation buttons:

  • Next: Advances to the next page
  • Previous: Returns to the previous page
  • Submit: Appears on the final page instead of Next

You can customize the labels and appearance of these buttons in the page settings.

Progress Indicator​

Multi-step forms include a progress indicator that shows users their current position in the form sequence. The progress indicator displays:

  • The total number of steps
  • The current step
  • The titles of each step
  • Completed steps (visually distinguished)

Conditional Navigation​

You can implement conditional navigation to show or skip certain pages based on user inputs:

  1. Select a Page component
  2. Navigate to the Conditional tab in the settings panel
  3. Enable the "Conditional" option
  4. Set up the condition using the visual condition builder:
    • Select the field to base the condition on
    • Choose the operator (equals, not equals, contains, etc.)
    • Specify the value to compare against

When the condition is met, the page will be displayed; otherwise, it will be skipped.

Data Persistence​

In multi-step forms, data entered on previous pages is preserved as the user navigates through the form. This allows users to:

  • Review and edit their entries on previous pages
  • Save their progress and continue later
  • Navigate back and forth without losing data

Best Practices for Multi-Step Forms​

  • Group related fields together on the same page
  • Keep each page focused on a single topic or task
  • Use clear, descriptive page titles
  • Provide helpful instructions at the beginning of each page
  • Include a progress indicator to show users where they are in the process
  • Allow users to navigate back to review and edit previous entries
  • Consider conditional navigation to skip irrelevant pages
  • Test the form flow thoroughly to ensure a smooth user experience