Do you want to add a multi-page form on your WordPress website? In this article we will tell you how you can create and add a multi-step form to your WordPress website using a plugin. By making use of the WPForms plugin you can create an amazing multi-step form on your WordPress website and reduce form abandonment as well as boost the number of leads and conversions.
We will be creating a multi-page (multi-step) form without doing any kind of coding or hiring any developer.
What is a Multi-step form?
A Multi-step form is basically a form that’s divided into several sections and has a set of questions on it as opposed to a single page form which consists of all the questions in a single page. You are basically breaking one long form into multiple steps, pages
If you are having more than 3 form fields on single page it’s better to make use of multi-step form also known as multi-page form.
One of the companies whatismycomfortzone.com saw a 53% increase in conversions and leads after changing a single-page form into multi-step form
Before we go ahead let’s understand the various benefits of multi-step form and the need for the multi-step form (once you understand why they are needed in the first place things will become a lot easier)
Benefits of Using Multi-step forms on your WordPress website
Reduce Form abandonment: When you have a lot of fields in your single page form then that leads to form fatigue (the user basically feels tiring to fill out such a long form). This is a kind of psychological play, if you give your users the option of filling out the form in small chunks (like asking 3-4 questions on a single page and then asking the rest of the questions on the other pages
Divide the questions into categories: Let’s assume you want to ask questions of variety of types to the user. If you ask 10-12 questions of different types on a single page the user might get overwhelmed and the chances of them dropping off are on the higher end and that is why it is recommended to make use of multi-step form.
When you make use of multi-step forms you can divide your 10-15 questions into 3-5 categories (5 on each page or 3 on each page as you wish) now when you ask questions related to that particular category then it makes more sense and drastically reduces the form abandonment percentage.
Clutter-free: When you create multi-step forms you basically get rid of all the clutter that exists and your form looks clean.
Improves User Experience and Engagement – Because multi-step forms look neat & clean and have lesser number of questions/ fields on each page so user experience is on a better side as compared to single page form.
Focussed user: The multi-step form allows your users to focus on a single form at a time. This way the user doesn’t feel information overload or overwhelm.
Conditional Logic: WPForms provides the feature of conditional logic so you can show specific form pages depending on user’s inputs.
Improves Leads and Conversions: All of the above mentioned factors contribute to increase in number of leads and conversions because your users don’t feel overwhelmed or fatigued while filling out the form.
One of the primary reason why we love WPForms is because it lets you create smart forms within minutes without hiring a developer or doing any kind of coding.
So without any further ado, let’s get started with creation of a multi-step form.
- How to Create a Multi-step form in WordPress Using a Plugin
- Step 1: Install the WPForms Plugin
- Step 2: Create a Multi-step form using WPForms
- Step 3: Split your Form into Multiple sections
- Step 4: Configure Progress Bar for your Multi-step Form
- Step 5: Customizing the Other Pages in the Form
- Step 6: Configuring your multi-step form
- Step 7: Configuring Notifications for your Multi-page Form
- Step 8: Configure the Form Confirmations
- Step 9: Adding the Newly Created Form to Your WordPress website
How to Create a Multi-step form in WordPress Using a Plugin
Before we even create Forms we need to install the WPForms plugin. Follow the below given steps in order to install the WPForms plugin
Step 1: Install the WPForms Plugin
In order to install the WPForms plugin follow the below given steps
Navigate to your WordPress dashboard
Go to the Plugins section –> Add New
Once you click on Add New you will come across a screen. In the search box type “WPForms” and then you will come across a screen similar to this one.
Now click on “Install Now” and then Activate the Plugin
Once you are done with the activation you will be asked for the License Key
Where to find the WPForms License Key
Navigate to your WordPress Dashboard and then go to the WPForms section –> Settings
Once you click on Settings you will get a window on the right hand side. Keep on scrolling down until you find the License Key section. You will come across a screen that’s similar to the one shown below
In case you have purchased the WPForms Pro plan then you can find the license key in the account which you used to purchase WPForms subscription
Now that we are done with the Installation and activation of the plugin let’s go to the next step and create our multi-step form
Step 2: Create a Multi-step form using WPForms
WPForms has several inbuilt templates which you can make use of while creating forms but for the sake of this tutorial we are going to make use of simple contact form
Follow the below given steps to create a new form.
Navigate to your WordPress dashboard –> Go to WPForms –> Add New
When you click on Add new you will come across several WPForms templates choose simple contact form template from the list. You can refer to the below screenshot to get an idea of what it looks like
Once you mouseover on the Simple contact form you will come across a screen as shown similar to the one below.
Once you click on “Create a Simple Contact Form” you will come across the form builder interface as shown below
Now you can drag the elements on the left and customize the form as per your needs. You can also rearrange/reorder the fields
Important Note: As stated earlier in the Pre-requisite section you will need the Pro license of WPForms in order to make use of the Page Break feature as the Page Break feature is available only when you upgrade to the Pro version. In case you haven’t upgraded please click on the below button
Step 3: Split your Form into Multiple sections
In order to split your form into multiple sections we will make use of the “Page break” element (which is available only to Pro license users) so if you have haven’t got the Pro license please get it from here before we proceed further
Assuming that you have already bought the Pro license we will go ahead and add the Page Break element (you will find this under the Fancy fields tab on the left side of the form builder interface (Refer to the below given screenshot)
All that you need to do is drag this Page break element onto your form depending on where you want the form to split. You can add as many pagebreaks as you want but make sure you don’t overdo it else your users will feel form fatigue. Make effective use of Page break.
Use page break only where you feel you want to split your form into multiple sections. Collect only that information which is needed, don’t unnecessarily add fields for the sake of it because you don’t want to overwhelm your users.
Step 4: Configure Progress Bar for your Multi-step Form
By making use of a progress bar in your multi-page form your users will get an idea of how portion of the form they have filled and how much is yet to be filled. Also, your users can see which category form they are filling out.
WPForms makes it super easy for you to create such progress bar as well as gives you several customization options so that you can customize your multi-form progress bar as per your requirement.
WPForms gives you 3 options to show a progress bar inside of your multi-page form. Let’s have a look at those 3 options.
1. Connectors: Connector basically connects various sections of your form and shows in the form of a progress bar along with your form’s title
2. Circles: You can make use of circle option which shows numbers e.g 1, 2, 3…along with the form’s title (specific to that section) e.g Personal information, Professional experience etc. (These are just examples of form’s page titles, your form page titles would be different as per your requirement.
3. Progress bar: This is basically a progress bar (showing progress on how much section of the form the user has filled and how much is remaining) e.g Step 1 of 3, Step 2 of 5 etc. You can’t see the form’s title in the progress bar.
We have shown an image below which shows the example of Connector, Circles and Progress bar respectively (you can choose anyone which you prefer)
Now we will go ahead and customize the following things
– Form title (e.g Personal information, professional experience etc)
– Progress bar (it’s color and choose a type between connector, circle and progress bar)
IN order to customize the form and add progress bar click on the “First page break” as shown in the below screenshot.
Once you click on the first page break a new panel will appear inside the form builder interface which will show the option to customize your progress bar (Refer to the below given screenshot)
As you can see in the above screenshot you can choose “Progress indicator” type e.g circles, connectors etc. You can also change the color of the progress bar (in the above screenshot we have chosen a green color).
When you make use of Circles or Connectors then you will be able to see your form’s/page title when you make use of a regular progress bar you won’t be able to see the form title
Step 5: Customizing the Other Pages in the Form
In this step we will be customizing the following things
– The page title for the next page
– The text for the button which will take the user to the next page
– Enable the option so that users can go to the previous page if they want to
In order to make the changes click on the “Page Break” section which is present on the left hand side of the form builder interface (Refer to the below given screenshot)
As you can see in the above option you can change the “Page Title” in the above case it is “Additional details”
If you want you can change the text of the button which takes the user to the next page. In the above case it’s “Next Step”, you can change it to whatever you want.
Besides that you can also enable the toggle switch which says “Display previous“. By enabling this toggle switch you can give your users the option to go to the previous page.
Once you are done with all the customizations it’s time to save your form. Now in the next steps we will configure the form settings, notifications and confirmations.
Step 6: Configuring your multi-step form
While configuring your form you can change the following fields
1. Form Name – You can change the form name as per your requirement.
2. Submit Button text – You can change the text of the submit button.
3. Spam Protection via reCAPTCHA: You can enable spam protection by making use of reCAPTCHA.
4. Offline Mode: You can also give your users the option to fill out the form and submit it once the internet connection is back.
5. GDPR Enhancements – You can disable the option of colleting IP address and user information.
Step 7: Configuring Notifications for your Multi-page Form
Now there are two aspects to the Form Notifications that you should be aware of
1. Once the user submits a form you should get some kind of notification that the user has submitted the form – You will get an Email notification whenever someone submits a form on your website. This is a good practice that should be followed so that you will be updated on any potential leads you get in you are working in the B2B business.
In order to receive Email notifications like the one stated above you will have to setup the Form notifications and provide your Email address
2. Once the user has submitted the form they should get a notification that their form has been submitted successfully.
YOu can make use of the Smart tags feature in order to send personalized email notifications to your site visitors.
Step 8: Configure the Form Confirmations
Form confirmations are a set of actions that should happen immediately and automatically once the user fills out a form. There are 3 kinds of form confirmations WPForms provides which we have enlisted below
1. Redirect – Once the user has submitted the form on your site you can redirect them to any page of your choice by utilizing the Redirect. You can take the user to any entirely different site altogether if you want.
2. Display Page – Once the user submits the form you can automatically redirect them to a display page something similar to a Thank you Page.
3. Message – This is the default message that a user gets when they submit the form on your website. You can even customize this message as per your needs.
If you need help or need more details about form confirmations you can check out this awesome guide on Form confirmations by WPForms
Once you are done configuring the form notifications and confirmations kindly save your form so that you can add it to your website
In order to add the newly created form to your WordPress website follow the below given steps
Step 9: Adding the Newly Created Form to Your WordPress website
Add a New Page to your WordPress website
Navigate to your WordPress dashboard –> Pages –> Add New
Once you click on Add New a new blank page will appear, now give a suitable name to your form
If you are using a Block editor then click on the + sign (Refer to the screenshot shown below)
Now in the search box search for “WPforms” you will immediately see the WPForms element pop-up (Refer to the below screenshot)
Once you click on WPForms as shown in the above screenshot, you will be presented with a Drop down option (as shown below). Choose the appropriate page which you have created from the Drop down section
Choose the page which you created in the above steps (choose that one from the drop down).
Once you have chosen the appropriate page then click on Publish in order to make the page live on your website.
So what are you waiting for? Get ready to create a multi-page form on your WordPress websites and increase your conversions and leads using WPForms Pro plan
We hope you enjoyed this step by step tutorial on how to create a multi-page form and add it to your WordPress website