Multi-Step Form

CF7 multi step forms - Themefic

Adding multiple steps to a form can be beneficial over single-step or single-page forms. It can prevent cognitive overload for users, ensure a smooth and elegant UI/UX, and positively affect conversion rates. 

The free version of Ultimate Addons for Contact Form 7 allows you to create multi-step forms effortlessly. 

Pre-Requisites

  • Assuming you have Contact Form 7 already installed and activated, you should then install and activate Ultimate Addons for Contact Form 7.  
  • Afterward, visit the Ultimate Addons tab and check the Enable Multistep box. 

Creating a Multi-Step Form

With that done, you can move on to create a new Contact form or edit an existing one. Make sure that you’ve added its code to a page and published it to see the live changes. 

  • On the form template edit section, you’ll now see two new elements named Multistep Start and Multistep End. These are essentially container tags that we’ll use to tell Contact Form 7 where each step begins and ends.
  • To create a step, simply click on Multistep Start, which will bring forth a pop-up. There, you can add a Label for the step followed by its Name. Note that the Name text field should be unique for each step of the form.
  • Once you’ve added the necessary <label> tags within the step, you can click on the Multistep End button to mark an end to the step. For multiple steps, follow the same process.
  • After editing the form, click on the tab named Ultimate Multistep and check the Is It Multistep Form box. Below that, you’ll find some additional customization options:
    • The Multistep Progressbar will give users an idea on how far they are with the form. Hide Progressbar Labels allows you to show only a visual indicator for the progress.
      The Progressbar Style section can modify the progress bar’s height width, background, roundedness, or the font properties (if there’s a progress bar label).
    • If you’re a Pro user of Ultimate Addons for Contact Form 7, you can also change the next and previous button texts or progress bar images. 

Once finished, hit save, and the changes should be live immediately. 

Please see this: