Splitting a massive project into mini-tasks helps reach the goal faster. Similarly, using a multi-step form in place of a long-form helps increase conversion rates. A report by Venture Harbour suggests that multi-step forms can increase your conversion rate by up to 300%.
Since long forms make people abandon the form and short forms aren’t enough for your business to gather the information you need, the next logical step to go for is multi-step forms.
Some of the many reasons that make multi-step forms a hit are:
- Grouping questions increases the user’s focus on one particular set.
- Putting simpler questions first prevents the user from feeling overwhelmed.
- Users are less likely to abandon the difficult questions at the end if they’ve already spent time answering several easy questions before.
- Users feel encouraged to finish the form when they see the progress bar.
Best practices for multi-step forms
- Collect their contact information at the beginning for future re-targeting.
- Do not put random questions. Categorize each section of the multi-step form logically.
- Use a progress bar to let users know how much progress they’ve made.
- Ask easier questions in the beginning.
- Use conditional logic to display the next question only if the previous question was answered in a certain way.
How to design multi-step forms using WordPress
Step 1: Create a form in WordPress
Install and activate the Formidable Forms plugin then follow these instructions to install Formidable Forms Pro version which will unlock the multi-step forms needed.
After that, click Formidable ? + Add New to create a new form. You could create any kind of form you want. For this example we will create a contact form.
Step 2: Split up your form with page breaks
Once you've created your form, the next step is to add page breaks which represents each of the steps of your form your user will take.
To add page breaks to your form, just use Formidable's drag and drop form builder. Under Advanced Fields, drag the Page Break field into your form.
In the example below, we divided the form after the First Name and Email Address fields.
After you've split your form into at least two parts, you'll be able to give each part a name.
In Formidable Forms, this is done by going into the Form Settings and setting the Pagination setting to Show Progress Bar.
You could also adjust the Page Titles, hide the Page Numbers, or hide the Pagination Lines. We recommend checking the box titled Show page titles with steps and label your pages. This helps for improving conversions as users know which page they are on when looking at the progress bar.
In our example, we are going to name our pages as Contact Info and Your Message.
Step 3: Design your progress bar
Now that you've set up your form, you might want to make sure the progress bar design matches your company branding.
Before that, make sure you choose the right style of Pagination. There are two options to choose from in the Form Settings tab.
- The Progress Bar
- The Rootline
Once you've chosen the one you like the best, it's time to tweak the design. To do this, head to Formidable ? Styles ? Progress Bars and set any color scheme you want.
You can adjust the colors of your progress bar in this section. As you make adjustments, you'll be able to preview them immediately with Formidable Forms Visual Styler.
Step 4: Add your multi-step form to your site
Now all that's left is to add your new multi-step form to any page or post.
To publish a form in Formidable, there are a number of options:
- Using the short-code builder
- Inserting the form short-code manually
- Using a form block
- Use the Formidable Form widget to display a form in the sidebar
Advanced users may also insert forms using PHP.
Step 5: Configure optional form settings
Before wrapping up, you might want to consider a few more form options:
- Configure your form settings
- Configure your form notifications
There are also advanced features to try, like conditional logic, where you can make sure your users only answer the questions that matter most based on the data they input.