A few days back, someone was asking me about creating multi-step forms in WordPress. I was at a party, somehow in a conversation, the issue came into existence. I was not in a mood to explain the regard but as I am working with WordPress, I felt to convince him and somehow I had to make him understand.
Later on, I thought of writing a tutorial on it that might help others creating a multi-step form in WordPress. That is why I am giving a try regarding this matter.
Why Design Multi-Step Forms?
A form is one of the easiest ways to collect information & get in touch with your audience. It might be a simple casual form, it might be a business form or any kind of survey related form.
However, long forms are sometimes disgusting to users and can be ultimately considered as bad UX as well. To get rid of this problem, almost all of the big firms are using multi-step forms which are broken into sections and pages.
The progress bar on top of the page offers the users more comfort and control on filling up the form and most importantly it provides a different flavor of interactiveness with your users. Moreover, it increases your engagement with users rapidly.
How to Create A Multi-Page WordPress Form With WP Fluent Form
I will be using WP Fluent Form here to make you understand. WP Fluent Form is a fast-growing user-friendly WordPress form plugin for creating any kind of forms.
First of all, you need to install and activate WP Fluent Form plugin in WordPress. For more details, see our step by step guide on how to install a WordPress plugin.
After activating the WP Fluent Form plugin and completing the licensing process you will have a congenial environment for creating a multi-step form on your website.
I think you are going to create three steps multi-step form as I am doing right now. The first step is for the user’s personal info, the second page is for user’s educational info and the third page will cover the user’s hobbies. Now, I am going to show you how to make it happen using WP Fluent Form.
To do so, simply go to the Fluent Form > Add Form, it will display a dialogue box with three default form format and a custom option for creating a new form. For more details, see how to create a new form in Fluent Form.
After creating the form, now you have to put necessary fields on that form. To do so, drag and drop the desired fields, for instance, for personal info form you will put four different fields on the form.
They are ‘Name’, ’Username’, ’DOB’, ‘Gender’. For ‘Name’, you have to select simply ‘Name Field’ field. For ‘User Name’ you have to use ‘Simple Text’ field. For ‘DoB‘ you have to drag & drop ‘Time & Date‘ field. For ‘Gender‘ you have to select ‘Radio Button‘ field.
Customize the ‘Element Label’ for each part according to the desired name. I am leaving a screenshot for your better understanding.
The same thing happens for the rest of the fields. For ‘DoB’ have a look.
In the Gender section, you have to change the options for the radio button.
Let’s have look at the total personal info section by an image for your better understanding.
The first part of multiple pages has created. Then we will drag & drop ‘Form Step’ on above the submit button for creating a gateway for multi-step form.
Now put the cursor over ‘Paging Start’ section, then you will find the Edit option (a pencil icon). Click on it, and it will take you to ‘Input Customization’. There, you have to give a title for every step by clicking the ‘Progress Bar’ button.
Write down the title name for each step. For instance, write ‘Personal Info’ in the ‘Step 1’ input field. Write ‘Education’ in the ‘Step 2’ input field and so on. Now take a look at the preview section.
The picture shows that one progress bar and one ‘Next’ button as an indicator in the top & bottom part of the form respectively.
Now you have to work on the second page of the form which indicates the education part of the form. For this, you can use the ‘Simple Text’ field for ‘University’ & ‘College’ for input. You have to use ‘Dropdown’ field for ‘Degree’ input in the form.
Let’s take a look at the screenshot for each and every input field. For university and college, you have to customize label first.
This configuration is for college.
For ‘Degree’ you have to use ‘Dropdown’ input field. In this case, you have to customize your label first, then you have to give options for the dropdown list.
Now, you will go to the third page which is related to the hobby of the user. To make this happen we have to select again ‘Form Step’ to make an approach for this.
A new input field will be created instantly after clicking the ‘Form Step’ field in the ‘Paging Start’ section. Write down the title name for the third step by clicking on the Edit option of the ‘Form Step’ section.
Write down the title by typing ‘Hobby’ in the input field. Then go for the third section of the form. You can select a ‘Simple Text’ field for each hobby.
You can drag & drop or click on the ‘Simple Text’ field to create the third page of the form. A screenshot is presented below for better understanding.
You have to drop it to right above the ‘Submit Form’ button.
In this way, you can take two more ‘Simple Text’ area to give a total view in the third section of the form. Then customize the ‘Element Label’ with the text of ‘Hobby One’
You have to customize the rest of the two fields with the name of ‘Hobby Two’ and ‘ Hobby Three’ respectively. Then look at the preview of this interface.
In the bottom of the page, you can give ‘Terms & Condition’ field to complete the total procedure. Then we can have look through to the total process of submitting the form.
This is how you can create a multi-step form using WP Fluent Form. This is pretty handy and effective working with WP Fluent Form as it gives you the most convenient environment making a multi-step form for a specific purpose. To avail this functionality and create beautiful, compact and intuitive multi-step forms, download WP Fluent Form Pro Add-on now!