In this article, I’ll show you how to create an engaging multi-page form that will keep your customers well engaged and also increase your conversion rate.
If you have a from that is very long and has many fields, it will easily bore your customers and they’ll avoid filling it up. But if you split that same form into multiple pages, it keeps your customers engaged and also increases user experience for your customers and they usually convert well.
So before you proceed, you need to know why you need to use multi-page form in your site.
Why Create a Multi-Page Form on Your WordPress Website?
If you’re still wondering what multi-page form actually is – it’s simply a form that’s actually split into multi-steps or multi-page and is no longer a long form.
The advantage of using this multi-step form is that it actually increases your rate of conversion of your customers, especially if your form has more fields.
A research done by WhatIsMyComfortZone.com actually saw that 53% of the website visitors converted into leads despite the form being broken down to multi-steps.
That’s the reason you need to create a multi-page form on your WordPress website.
So before we begin with creating the form, get your WPForms here.
Step 1 – Creating a From in WordPress
To begin with creating the multi-step form, you need to first install and activate the WPForms Plugin.
To install the plugin, just go to your WordPress dashboard and then go to Plugins > Add New and upload your plugin and activate it.
After activating the plugin, go to WPForms in the dashboard and then click Add New to create a new form.
Any type of form can be broken into multiple parts or steps using WPForms. So for our example, let’s go with a Simple Contact Form.
Now just go to the setup option and name your form and select the simple contact form template.
WPForms will now create a Simple Contact Form for you. It also allows you to customize the form using its drag and drop builder.
You can add additional fields by just dragging them from the left hand panel to the right hand panel.
Generally the Simple Contact Form templates already have Name, Email and Comment or Message form fields. Additional fields can be added as per your choice. You can also rearrange the order of the form.
And if you wish to create even more complex form than a Simple Contact Form, you can also create them. There are pre-designed templates that come with WPForms. Some of them are:
- Request a Quote Form
- Job Application Form
- Order Form
- Survey Form
- Poll Form
- User Registration Form
These forms are usually longer than the Simple Contact Form and requires multiple steps to complete if you ask a lot of information from your customers.
Next, let’s look into how to split the form into multiple parts.
Step 2 – Spliting Your Form into Multiple Parts
Once you’ve made the required changes to your form, you will need to add the Page Break form field to split it into different pages.
Now to do that, you just have to drag the Page Break form field under the Fancy Field from the left hand panel and drag it to the right hand panel and place where you want to split the form.
You can do like this wherever you want to split your from into another page. Once, you’re done with that you can add additional fields to your form.
Although WPForms allows you create as many form pages as you want, just remember not to bore or overwhelm your customers. Only ask for the information that you need. And you can always gather more information later.
Step 3 – Customizing The Progress Bar
The reason you need to show a progress bar in your form is to let your customers know that there are different sections in your form. This also helps them identify in which part of the form they are. And in this way they actually tend to complete the whole form.
The best thing is that WPForms comes with three different breadcrumbs style indicator bars to use on your forms.
- Connectors: They show a connecting bar and the page title on each part of your multi-step form.
- Circles: Indicates a circle and the page title on every page of your multi-step form.
- Progress Bar: This indicates the progress of your form as the customer fills it out.
You can customize the progress bar and the page title of the first page of your multi-step form by clicking on the First Page break section.
Now you’ll see a new panel appear in the form editor, you can choose the style of progress bar that you want to use. You can also make changes to the color of the progress indicators.
If you choose the Circles or the Connectors option, make sure to change the page titles so that it becomes easier for your customers to know on which part of the form they are on. Otherwise, they’ll just see a standard progress bar guiding them through the number of steps left on your form.
Now you have to customize the next page title and the button taking the site visitors or your customers to the next page on your form. To do that, click on the Page Break section you created when you added the page break to the form.
Make sure to also toggle on the feature that lets you show your customers a Previous page button so that they can return to the previous page if they need to. This feature helps your customers in case they want to re-enter some information.
You can also make changes to the copy of the button.
After having created all the page breaks and customizing the progress bar indicators, click Save.
Step 4 – Configuring The Form Settings
So your whole form is ready and now you need to configure the form’s settings. To do that, go to Settings >> General.
These are the following that you can configure:
- Form Name: You can make changes to your form name if you like.
- Form Description: You can give a description to your form.
- Submit Button Text: You can customize the copy of the submit button.
- Spam Prevention: This allows you to stop Contact Form spam using the honeypot feature or Google reCAPTCHA. The honeypot feature is automatically enabled on all WordPress forms so if you plan to use other forms of spam prevention, unclick this option.
- AJAX Forms: You can enable AJAX settings with no page reload.
- GDPR Enhancements: GDPR is usually required if you are collecting data from European countries. You can disable the storing of entry information such as IP addresses and user agents to comply with the GDPR requirements.
Once you’re done with the configuration, click Save.
Step 5 – Configuring The Form’s Notification
Now you need to configure your form’s notifications.
Whenever a customer submits his/her information on the website, an email notification is sent. And unless you disable this feature, you’ll get a notification about the submission.
You can also send a notification to your customer’s email address using the Smart Tag when they submit a form. This also lets them know that their form has gone through properly.
When it comes to multi-page forms, the customers might have taken a long time to finish the form and it is much appreciated if you let them know that their form has gone through properly by sending them a notification. Otherwise some of your site visitors or customers may never care to fill your form twice.
You can check out the documentation on how to set up form notifications in WordPress.
Step 6 – Configuring The Form’s Confirmation
The Success message that is displayed on your site visitor’s or customer’s screen once they have submitted a form is known as Form Confirmations. These confirmations lets your customers know that their form has been processed and also lets them know what the next steps are.
These form confirmations are very helpful especially when it comes to long forms on your website.
WPForms comes with three types of Confirmations to choose from:
- Message: This is the default confirmation type in WPForms. When a customer submits a form, a simple confirmation (success) message will appear on their screen letting them know that their form was processed. (You can craft your own success message in a personalized manner).
- Show Page: This type oi confirmation will take your site visitors or your customers to a specific web page on your site thanking them for their form submission.
- Go to URL (Redirect): You can use this option if you want to send your site visitors or customers to a different website.
Now I’ll show you how to set up a form confirmation in WPForms so that you can create your own success message that your customers will see when they submit the form on your site.
To do that, click on the Confirmation tab in the form editor under Settings and select the type of confirmation you would like to create. For example, I’ll select the first type of confirmation (Message).
Now you can customize the confirmation message and then click Save.
Finally, you have to add your contact form to your website.
Step 7 – Adding The Form to Your Website
Now that you have created your multi-step form, you have to add it to your WordPress website.
You can add your form to multiple places on your website including your pages, blog posts and sidebar widgets.
The most common placement option is the page or post. So to do that, create a new page or a post in your WordPress or go to the update settings of an existing post and click inside the block below the page title and click on the Add WPForms icon.
Now the WPForms widget will appear and you can click on the WPForms dropdown and select one of the forms that you have already created that you want to insert on the page.
After that you can go to the top right corner of the page and click update and the form will appear on your website.
Finally you’ve successfully created an engaging multi-step form on your WordPress website using WPForms.
So get your WPForms plugin now.