For years, one of the most requested features for our Divi Contact Form Helper plugin has been the ability to create multi-step forms. Not having a native multi-step form feature has been the main reason users turn to dedicated WordPress form plugins. That changes with this release!
We took our time because we wanted to do it right. Instead of shipping a limited or workaround-based solution, we waited until Divi 5 gave us the flexibility to build this feature the right way. The result is a fully integrated multi-step form system that works directly inside the Divi Builder and native Divi Contact Form module, using the same familiar interface you already know. And now, it’s finally here!
Learn More About Divi Contact Form Helper!
Upgrade the existing Divi contact form module with over (115) premium features and settings!
▶️ Please watch the video above to get all the exciting details! 👆
How Multi-Step Forms Work in Divi
To create a multi-step form, just add the new Page Break field type in the Contact Form module. You can add a Page Break field just like any other field by choosing it from the Field Type dropdown in the Field Options group.
We also added this shortcut for convenience, which you can access when clicking to add a new element to the contact form.
Each Page Break sets up a new step, so you can divide your form into different sections. In this example, there are three page breaks added, which divide the content into three pages. Any fields that you arrange between the page break will show for that step.
You can manage everything through the usual Content and Design tabs. There are several new multistep-related option groups. You have full design control over each step, buttons, progress indicators, and every part of the form.
Since this feature is built into Divi 5, you can create and preview your form right in the Visual Builder. This makes it simple to adjust the layout, navigation, and style as you go.
Key Multi-Step Form Features and Controls
Step Indicators and Progress Display
You can decide how to show progress in the form, based on the type of experience you want for your users.
You can use a traditional step indicator, a progress bar that shows a percentage, or no indicator at all. Step markers can be numbers, icons, or images. You can also add step titles and descriptions to give more context.
You can also show a line connecting the steps and let users click between steps if needed.
Navigation and Step Behavior
Navigation is a key part of multi-step forms in Divi, and you can fully customize the buttons. You decide where the Back and Next buttons go, what their labels say, and how they look. You can also set up validation so users must finish each step before moving on.
Progress Bar Customization
When using the progress bar indicator, you have full control over its appearance.
You can change the fill and track colors, adjust the height and border radius, and style the label text with Divi’s usual typography options. You can also adjust the spacing so it fits well in your layout.
Full Design Control For Every State
Every part of the multi-step experience can be styled using Divi’s design system.
This means you have separate styling options for active and inactive steps, full control over step containers, markers, typography, and spacing. You can also add icons and images to your step markers.
You can manage all of this through Divi’s familiar design settings, making it easy to match your form to the rest of your site.
Step Transitions and Animations
You can make your form look more polished and professional by turning on animated transitions between steps.
You can choose from many animation styles, like fades, slides, zooms, bounces, and flips. You also have full control over timing, delay, and easing, so you can adjust how each step changes.
Watch The Feature In Action, Explore Demos, And Get Started
We created a complete video walkthrough that shows how multi-step forms work in the builder. You’ll see real examples and edits to our demo layouts, so you know exactly what’s possible.
You can explore the demo layouts yourself to get ideas or figure out how certain layouts are built.
Install or update the plugin today, as multi-step forms are now available in the Divi Contact Form Helper plugin, along with hundreds of other features that expand the default Divi Contact Form module.
We’re also finalizing another popular feature: saving form progress. This will make multi-step forms even more powerful.
Reminder: New plugin features are always only included in the Divi 5 version.
Learn More About Divi Contact Form Helper
Upgrade your Divi website's contact form with over 115 premium features in the Divi Contact Form Helper plugin. Here are some of the main solutions available:
- Save Contact Form Submissions To The Database
- Customize How Divi Contact Form Entries Are Backed Up, Accessed, And Managed
- Add A File Upload Field To The Divi Contact Form
- Add A Date/Time Picker Field To The Divi Contact Form
- Improve And Add New Spam Protection Features To The Divi Contact Form
- Insert Advanced Custom Dynamic Merge Tag Variables In Divi Contact Form Entries
- Add A Star Rating Field To The Divi Contact Form Module
- Advanced Admin Email Notification Features For The Divi Contact Form
- Send An Auto Responder Confirmation Email To The Person Who Filled Out The Divi Contact Form
- Integrate The Divi Contact Form With Your Favorite Apps
- Add Headings, Dividers, HTML, Or Anything Else To the Divi Contact Form Module
- Show Labels, Hide Placeholders, And Write Descriptions For Divi Contact Form Fields
- Limit The Maximum Number Of Entries Allowed To Be Submitted In The Divi Contact Form
- Personalize And Customize The Divi Contact Form Success Message
- Integrate Your SMTP Server To Ensure Emails From The Divi Contact Form Are Delivered
- Enjoy Advanced Miscellaneous Improvements To The Divi Contact Form Module
- Write Custom Text For Divi Contact Form Elements
- Translate Divi Contact Form Text For Multilingual Sites
It truly does provide all the missing features and more!
Hi Nelson, the new multistep feature is a great addition to your impressive feature list. Are you planning to add a “Numeric Calculation” feature in the near future? Thanks!
Thanks Mark, glad you like it!
I assume you are asking whether we will add a main new feature for real-time form field calculations. We currently do not have any plans for such a niche and large feature. We have hundreds of feature requests, but honestly we have never had any feature request for that before.
Is he talking about an anti-spam mechanism like CF7 has?
Divi has always had a basic match captcha feature, so I assume something else.