Login
View Categories

Multistep Form

3 min read

Table of Contents

Multistep Addon — Ultra Addons for WPForms #

Sometimes, we need to create long forms with multiple fields and sections — such as registration, survey, or application forms. Filling out such large forms all at once can feel overwhelming for users. To solve this, we’ve developed the Multistep Addon for WPForms, which divides your form into smaller, easy-to-follow steps.
This makes form completion smoother, reduces abandonment, and improves the overall user experience.

What is the WPForms Multistep Addon? #

The Multistep Addon lets you split long WPForms into multiple steps or pages, allowing users to move through them one section at a time. Each page can have its own title, buttons, and style options — all manageable within the WPForms builder.

This improves readability, keeps forms visually cleaner, and helps users stay focused while filling them out.

Key Features: #

  • Step-by-Step Navigation — Split forms into logical sections.
  • Progress Bar or Step Indicator — Show users how far they’ve progressed.
  • Previous/Next Buttons — Smooth navigation between steps.
  • Customizable Page Titles and Labels — Add context to each step.
  • Conditional Logic Support — Display or skip steps dynamically.
  • File Upload & Validation Compatible — Works with other Ultra Addons.
  • Fully Responsive — Seamlessly adapts to all screen sizes.

What’s Needed #

Before using this addon:

  1. Install and activate WPForms on your WordPress website.
  2. Install and activate Ultra Addons for WPForms.
  3. Navigate to Ultra Addons → All Addons in your dashboard.
  4. Enable the Multistep Addon toggle and click Save Settings.

Once activated, the Multistep functionality becomes available inside the WPForms Builder.

How to Use the Multistep Addon #

Step 1: Create or Edit a WPForms Form #

Go to WPForms → Add New or edit an existing form.
Add the required fields you want your form to include, such as Name, Email, Address, or Message.
You can use this feature for contact, booking, feedback, or registration forms.

Step 2: Add the Multistep Elements #

After enabling the addon, you’ll find three multistep elements in the form builder:

  1. First Page
  2. Page Break
  3. Last Page

These elements define the beginning, middle, and end of your multistep form.

Backend Settings Explained #

1. First Page #

This marks the starting point of your multistep form. It helps define the structure, title, and progress style of your first step.

Available Options:

  • Progress Indicator:
    Choose how progress will be displayed (Bar, Steps, or Circle).
  • Indicator Color:
    Select a custom color for the progress bar or indicator to match your site style.
  • Page Title:
    Enter a title for the first page (e.g., “Personal Details,” “Step 1,” or “Start Here”).

💡 Tip: Use a friendly, clear title to introduce the form — users are more likely to complete it.

2. Page Break #

Use this option to divide your form into multiple sections. You can add as many Page Breaks as you need for multi-stage navigation.

Available Options:

  • Page Title:
    The step title that appears above the form fields (e.g., “Address Info,” “Step 2”).
  • Next Label:
    Customize the text for your “Next” button (e.g., “Continue,” “Next Step”).
  • Display Previous:
    Enable this toggle to show a “Previous” button for navigation.
  • Previous Label:
    Customize the text for your “Previous” button (e.g., “Back,” “Previous Step”).

Tip: Always keep your button labels short and action-oriented.

3. Last Page #

This marks the final step of your multistep form, usually where users review their details before submission.

Available Options:

  • Display Previous:
    Allow users to return to earlier steps to make corrections.
  • Previous Label:
    Customize the “Previous” button label (e.g., “Go Back,” “Edit Info”).

Tip: Add a short success message or note like “You’re almost done!” on the last page.

Example Form Flow #

Step 1 — First Page:
Basic contact details (Name, Email, Phone)

Step 2 — Page Break:
Additional info (Address, Services, Preferences)

Step 3 — Last Page:
Review and Submit

Each step appears sequentially, and users can navigate back if needed.

Step 3: Configure Multistep Global Settings #

Go to WPForms → Settings → Multistep Form to fine-tune the experience.

Settings include:

  • Enable or Disable Multistep functionality globally
  • Enable Progress Bar Display
  • Toggle Hide Step Labels (for minimalist design)
  • Select Layout / Style Template — Choose from multiple free and pro templates

Pro users can unlock advanced layouts such as progress circles, horizontal timelines, and step cards.

Step 4: Test the Form #

Once you’ve added and customized your steps, click Preview.
Move between pages using the navigation buttons to confirm everything works correctly.
Submit a test entry to make sure the final page transitions and validations function as expected.

Compatibility #

The WPForms Multistep Addon works perfectly with:

  • WPForms Lite & Pro
  • Ultra Addons Database Addon
  • Advanced Phone Addon
  • File Upload Addon
  • Elementor & Gutenberg blocks

Live Example #

Check our live demo of the WPForms Multistep Addon to see how step transitions, progress bars, and navigation buttons appear on the frontend.

👉 View Live Demo

Troubleshooting #

If your steps don’t display correctly:

  • Confirm that the Multistep Addon is enabled in Ultra Addons.
  • Verify that each step has both a Start and End tag.
  • Clear any caching or minification plugins that might block scripts.
  • Switch temporarily to a default theme to check for conflicts.

💬 Still Not Clear? #

No worries — we’re here to help!
If you are a Free User, please open a ticket here

Leave the first comment