Would you like to learn how to create an engaging multi-page form that will help you keep your readers and subscribers interested and also converts well for you?
Just by splitting a form into multiple pages increases the experience and also keeps the engagement level up. When users see a form that’s too long they avoid filling it up in the first place, but if a form doesn’t ask the right questions you fail to get the right data from your readers or customers.
In this blog post, I’ll show you how to create an engaging multi-page form in WordPress.
Why Should You Create A Multi-Page Form On Your Website?
If you’re wondering what a multi-step form is, here’s what it is – It’s simply a form that’s broken down into multiple page or steps so that it’s no longer a long form.
One of the most interesting things about the multi-step form is that despite adding more steps to your form, even if it’s in multiple parts, it actually increases the form’s conversion rate.
Well we all want a form to be filled by our readers or customers but we also want them to convert. By conversion I mean clicking on the form, filling it and completely finishing the form by hitting the final submit button or whatever button we’ve placed as the final button.
One interesting study happened at WhatIsMyComfortZone.com where after splitting up the single-step landing page form into multiple steps, they actually saw that 53% of site visitors converted and became leads, even when the form was broken into many steps.
So now you can see what’s the benefit of using a multi-step form or a multi-page form.
Form Builder that supports or even allows you to build multi-step forms is WPForms.
Grab WPForms and let’s get on with building our multi-step form.
How To Create A Multi-Step Form On Your Website?
Step 1 - Create A Form In WordPress.
In order to create a multi-step form you need to install and activate WPForms Plugin.
It’s pretty easy to install a plugin. Go to your WordPress Dashboard and then go to Plugins >> Add New and upload your plugin and activate it.
Now, go to WPForms >> Add New to create a new form.
Before we create a form and break it up into multiple parts lets create a simple contact form.
Once you’ve created your form, name your form and select the template you want to use, so it’s actually based on the type of form you’re creating. We’ll choose the Simple Contact Form template to create our form.
Now, WPForms will create a simple contact form for you. It allows you to build it up with the drag and drop builder feature that it has.
On the left panel, is the form builder area, you can use them to add additional fields to your contact form by dragging them and placing them on the right hand panel, in their appropriate places.
Generally, the simple contact form template has the Name, Email, and Comment or Message form fields. You can add additional fields if you like.
You can also click on any of the form fields if you’d like to make changes. You can also click on a form field and drag it to rearrange the order on your contact form. This is just done to suit your needs and formatting style.
In case you want to create something more complex than a simple contact form you can create them.
There are however other tutorials that utilize the pre-designed templates that come with WPForms. Some more in demand form styles are:
- Request a quote form
- Job application form
- Order form
- Survey form
- Poll form
- User registration form
These kinds of forms are usually much longer than a simple contact form and it requires multiple steps to complete them because you’ll be asking for a lot of information from your readers or customers.
As you follow along, let’s now find out how to split your form into multiple parts.
Step 2 - Split The Form In Multiple Parts.
After you’ve created your form and customized all the form fields according to your need, you have to add the Page Break form field in order for it to split it up into different pages.
To do this, simply drag the Page Break form field, found under Fancy Fields, from the left hand panel to the right hand panel and place it right where you want it to break the page into different page or parts.
Place the field where you want the form to split. Doing this will split the pages into parts.
You will have to do this wherever you want your form to split into another page. Once that’s done, you can add additional form fields to complete your form.
Once of the best things about WPForms is that it allows you to create as many form pages as you want, but you must remember that you cannot bore or overwhelm them, as people tend to lose interest if it’s too long or tedious or if it requires more work. Only collect the information you need. You can always gather more information later.
Step 3 - Customize The Progress Bar.
On the next step we will introduce the progress bar.
At each stage of your form, you should show a progress indicator to let users/reader/customers know about the different sections of the form they’re filling. This way they always know where they’re at on the form and how much they have left to fill out before clicking “Submit”.
And all of this can be done if you introduce progress bars.
Lucky for you, WPForms comes with three different progress bar styles that you can use for your multi-step forms:
- Connectors: It shows a connecting bar and page titles on every part of the multi-step form. (Refer Image below)
- Circles: It shows one circle and a page title for every page on your multi-step form. (Refer Image below)
- Progress Bar: It indicates the progress of the form as they fill it out. (Refer Image below)
Pick the ones you want to use and then customize the progress bar and page title of the page on the first part of your multi-step form, and then click on the First Page break section.
Refer the image below to follow along.
Note: You’ll see a new panel will appear in the Form Editor where you can choose which progress bar style you want to use. Also, you can change the progress indicator’s color here too. Customize it to match your website branding colors and style.
You are also allowed to change the page title so that people know which part of the form they’re on if you choose the Circles or Connectors option. Otherwise, users will just see a standard progress bar guiding them through the number of steps left on the multi-step form. You don’t want that!
Now you can go ahead and customize the next page title and the button taking site visitors to the next page of your form, then you can click on the Page Break section you created when you added the page break to your form.
Refer the image below to follow along with me.
You are also allowed to toggle on the feature that lets you show website visitors a Previous page button because this way they can return to the previous page of your form if they need to.
I would make sure to include that. It comes in handy when someone wants to go back and re-enter the right information into the fields.
After you’ve complete that, you’ll have the option to change the button copy too. You can refer the image above.
Once you’re done creating all of your page breaks and customizing the progress indicator, click Save.
Make sure to follow the same process laid out above in case you have a bigger form idea in mind. Also, make sure to have the previous and next page button so people can navigate to where they like.
Also make sure to hit “Save” so that all the necessary changes are saved.
Step 4 - Configure The Form Settings.
Now that our form is ready, it’s time to configure the form settings.
Go to Settings >> General. This is where we’ll be doing all the settings changes.
This allows you to configure the following:
- Form Name — You can change the name of your form here.
- Form Description — You can give your form a description (that’s for your reference).
- Submit Button Text — You can customize the copy on the submit button (or name it something else).
- Spam Prevention — This is there to stop the contact form from spam using the honeypot feature or Google reCAPTCHA. This honeypot feature is actually automatically enabled on all WordPress forms so if you want to use another form for spam prevention, you can unclick this option and this won’t be added to your forms. Most people use them nowadays to prevent bots from entering data into a form.
- AJAX Forms — You can use this setting to enable AJAX settings. AJAX Settings makes sure that there is no page reload when you hit the submit button.
- GDPR Enhancements — GDPR settings is mostly required if you collect data from European Countries. You can disable this if you want to stop the storing of entry information and user details, such as IP addresses and user agents, in order to comply with GDPR requirements.
After you’ve done the needful on this page, you can go ahead and click Save.
This saves the form settings for you.
Step 5 - Configure The Form's Notifications.
Our next step is to configure the form’s notificaitons.
Notifications are a great way to send an email whenever a form is submitted or filled by readers/customers/users on the website.
Here’s what you must know that unless you disable this feature, whenever someone submits a multi-step form on your site, you’ll get a notification about their submission.
I’m sure you want notifications about people filling up the multi-step form you created.
There is a thing called Smart Tags, that you can use Smart Tags and what that will do is it will send a notification to the user’s email address when they submit a form, so it lets them know you received the form that they’ve just filled
This allows you to contact them later. What this does is it assures them that their form has gone through properly. It lets you know the form is working.
Note – One of the most appreciated things when it comes to multi-page forms is that it may have taken a long time to fill out since they are multiple parts. So the last thing they want to see is if what they spent such a long time to finish went through successfully. (Otherwise they would not do it again the next time).
There are tutorial on this, you can check out WPForms documentation on how to set up form notifications in WordPress.
Here’s what it looks like after you get their info. (For example).
Step 6 - Configure The Form's Confirmations.
Our next step is to configure the form confirmations.
What they are basically are the messages that displays to website visitors once they submit a form on the website.
Since we are creating multi-step forms this is a needed step.
WPForms allows you to show three confirmation types to choose from:
- Message. This is the default confirmation type in WPForms. When a site visitor submits a form, a simple message confirmation will appear letting them know their form was processed.
- Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their form submission.
- Go to URL (Redirect). This option is used when you want to send site visitors to a different website.
If you know this part, you can skip to the last step or else follow along.
Let me show you how to set up a simple form confirmation inside WPForms so that you can customize the message it shows when they submit a form on your website.
So, click on the Confirmation tab in the Form Editor under Settings.
Then, select the type of confirmation type you’d like to show. For this example, we’ll select Message.
You can display a message you want to show your website visitors who submit your form.
Now go ahead and customize the confirmation message and click Save.
Now we are ready to add this multi-step contact form on to our website.
Step 7 - Add The Form To The Website.
For the final step in our process we need to add the multi-step form that we created on to our WordPress website.
Usually the most people use it on their pages/posts. So we can collect form registrations right there where we inserted it.
So, you need to create a new page or post in WordPress, or go to the update settings on an existing one that’s already there.
You need to click inside the first block (the blank area below your page title) and click on the Add WPForms icon. Refer to the image below if you can’t understand.
This will start to show the WPForms you’ve created and you can choose the ones you want.
Since it’s tight and square your WPForms widget will appear inside of that block. You can click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select the form you just created.
Then, go ahead and publish your post or page so your contact form will appear on your website.
Now, click on the blue button in the top right that says either Publish or Update, so now your form will appear on your website.
Congrats you’ve successfully created an engaging multi-step form on your wordpress website using WPForms.
So if this tutorial helps you understand how to create an engaging multi-step form using WPForms on your WordPress Website you must share this article.
You now know how to create a multi-step form in WordPress and you can start improving your website visitors’s experience and also see that you form conversions goes up.
So here’s what you need to do – Get started with the best multi-step form builder for WordPress – WPForms by clicking here.