When was the last time you filled a lengthy form on a website cursing the website developer for not making it easy for the user? I’m pretty sure you have come across at least a few such instances in the past.
As a web designer, I know that it is a nightmare for end-users – especially on mobile devices. It’s worse. The form fields are too small, the page looks cluttered, you have to scroll all the way down and up to view all the form details. It’s a perfect example of how online forms should not be designed.
Instead, it should be broken up into multiple steps or pages and grouped together based on the form fields on a particular page. Personal details can be collected on one page, billing details can be collected on the other, and payment details on the third. You get the idea, right? This is just one of the many use cases of multi-page WordPress forms.
But honestly speaking, it is THE best way to get the information you want without affecting the user experience on your site.
Table of Contents
How to create a multi-step form in WordPress
Well, first you need the WPForms plugin. If you are a power user, you can go for the Pro version. Else, the Basic version works just fine. You can read more about it in my WPForms review. Once you have got the plugin, install and activate it. Then, you can continue with the steps below.
Step-by-step guide to create a multi-part form in WordPress –
Total Time: 15 minutes
Create a form
Go to WPForms –> Add New from your WordPress dashboard and create a new form by choosing a template and giving your form a name. I’m going to choose a simple contact form template for demonstration purposes. You can choose any template of your choice.
Add required fields
Once the template is loaded, you can add or remove form fields to customize the form as per your needs. Note that this will your original form – so make sure you add all the necessary form fields exactly in the order you want it to be displayed. We will break it into different pages in the next step.
Split your form into different steps
Once you have added all the form fields and customized it, you can start breaking your form into different steps or pages by dragging and dropping the Page Break form field into your form. You can find the Page Break form field under Fancy Fields.
Customize progress bar
A progress bar doesn’t add much functionality to your form but it gives the user an idea of how much time it might take to fill the form. Also, they can switch between different form sections when they need to double-check their form data. To customize the progress bar, just click on the page title of the first page of your multi-step form and click on the First Page break section. It will display a new panel from where you can customize it.
Configure form settings
Now that you have added all the form fields, added page breaks, and customized the progress bar indicator, you can go to Settings –> General to configure your form settings. Don’t forget to save the changes once you’re ready.
Add form to the desired page
You are now ready to put your form to work. Open up the WordPress editor screen on the page you want to add your form and choose the WPForms block. Then, choose the newly created multi-part form from the dropdown list and update the page. Voila! Your multi-page form is now ready.
So, what are you waiting for? Get WPForms now and create your multi-page form right away!