Multi Step Form

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.