A multi-step form can significantly benefit the UI and UX of your website by itself. It reduces the load on the user and allows them to focus on one thing at a time, increasing the chances of properly filled forms and higher engagement.
In addition, Ultimate Addons for Contact Form 7 provides a host of premium skins for pro users to take it up a notch.
Installation
- Along with Contact Form 7, you’ll require the Pro version of Ultimate Addons for Contact Form 7, which is available on Themefic’s download portal.
- Since the premium skins apply to multi-step forms, download the Multi-Step Form plugin from the portal as well. Once downloaded, click on Add New in the Plugins tab on the WordPress dashboard and install and activate the .zip file from there.
- Lastly, go to the Ultimate Addons settings page and check the Enable Multistep box.
Enabling Premium Skins for Contact 7 Forms
Note: This guide will focus on utilizing the premium skins for multi-step forms. For a detailed guide on the usage of the addon, visit this page.
- Assuming you’ve activated the multi-step form addon, you should see a tab named UACF7 Multistep Form in the form editing section of Contact Form 7. Once you click on it, hit the check mark on the box that says “Is It a Multistep Form?” and save it.
- Once you’ve saved it, visiting the UACF7 Multistep Form should now give you additional options — Multistep Progressbar and Progressbar Layout.
Firstly, enable the Multistep Progressbar. Afterward, move over to the Progressbar Layout section, where you’ll find a bunch of skins. Each style enables a different layout, so choose any one and hit save. Make sure to publish the form on a page and refresh it to see the changes in real time.
Live preview link here
Please see this: