Contact Form 7 doesn’t have multi-step forms by default. However, you can easily create them with the Essential Addons for Contact Form 7 plugin. This tool lets you split long forms into steps. It includes a progress bar for a smooth experience. Your visitors will find it easier to complete forms, leading to better engagement.
This guide will help you understand and implement the multi-step form in Contact Form 7.
Make sure you have installed both Contact Form 7 & Essential Addons Contact Form 7 plugins inside your WordPress.
Enable Multi-Step Form
You must enable the Multi Step Form before implementing the customized multi-step from in Contact Form 7. To do that, follow the below steps:
- Navigate to the Contact Form 7 menu.
- Essential Addons.
- From the Features tab enable the Multi Step Form.
Add Multi-Step Form
To implement the Multi Step Form in your contact form follow the below steps:
- Navigate to any existing form or create a new one.
- Add the “Multistep Start” & “Multistep End” tags where you want to display them in your form.
Note: Multistep Start refers to the start point of a step & Multistep End refers to the endpoint of a step.
Configure Multi-Step Form
After clicking “Multistep Start” or “Multistep End” tag a new popup window will appear. Here you can configure & customize the multi-step form settings.
- Field Type: Tick or untick whether you want to mark it as required or not.
- Field Name: Usually the name field is auto-generated. You can add custom value if required.
- Label: Enter custom Label if required.
- Class Attribute: Enter custom class attribute if needed.
Click the Insert Tag button once the configuration is done.
- The customized tag will be added to your form editing panel.
- Save Changes.
Multi-Step Form Additional Settings
To configure & customize additional settings for Multi Step Form follow the below guidelines:
- Enable Multistep Fields: Enable/ disable the multistep fields on Contact Form 7.
- Enable Progressbar: Enable/ disable the progress bar on Multistep.
- Hide Progressbar Label: Enable/ disable the progress bar label on Multistep.
- Progressbar Style: Progressbar Style on Multistep.
- Progressbar Style: Modify progressbar styles for the form.
- Next and Previous Button Style: Modify the next & previous button styles for the form.
Embed the Shortcode
- Copy & Paste the shortcode inside your page or post to display the form.
Output
