How to Create an Eye-Catching Multi-Page Form in WordPress
Do you want to create multiple WordPress page forms that look great and convert well?
The splitting of a form into several pages increases user involvement and improves user experience on your website, while combating form fatigue so that we can get more conversions.
Why Should We Use Multi-Step Form on Your Website?
Ask what is a multi-step form first of all? It just splits the form into few pages so that its not one big lengthy form.
And, by adding more pages to your WordPress form, you can potentially improve your site’s conversion rate using a multi-step formula (also known as multi-part method or multi-page process) specially if the form has over 3 fields.
In fact, after dividing into several forms what was once a one page form in WordPress, WhatIsMyComfortZone.com actually found that 53% of site visitors converted and became leads, even if the form was broken into many smaller steps.
And because each of their forms asked the same questions, it was reasonable to turn all long forms into multi-step forms on the website from then on.
Here are more reasons for building a WordPress multi-stage form:
- Focus: You can split information into areas of focus for the user by grouping form queries.
- Reduce form abandonment: Consumers are more likely to complete the details when separated into pages rather than in a long single form.
- Collect only what you need: You can use Conditional Logic to construct a WordPress multi-step form with conditional fields. Show multiple form pages based on the answers given by the users.
How Can You Create a Multi-Step Form in WordPress?
Step 1: Create a Form in WordPress
Move on to WPForms » To build a new form, click “Add New”.
With WPForms you can divide any form into multiple forms. We will create a simple contact form for our case.
Name the form on the screen and select the template that you want to use, based on how you build a form. The Simple Contact Form template will be selected.
The Drag and Drop Builder of WPForms will create a simple contact form.
You may add additional fields to your contact form from the left panel form builder area.
You can already have Name, E-mail, Comment or Message Form fields with the simple contact form template.
To make adjustments, click each of the fields of the form. You may also click on a form field and move to the form to rearrange the list.
Step 2: Split Your Form into Different Parts
Once you’ve added and customized all the form fields on your form, you need to add the Page Break form field to your site to split it into different pages.
To do this, move from the left hand panel to the left hand panel, move the Form field Page Break located under the Fancy fields.
Specify the area where the form is to be split.
Do this anywhere you want your form to be split into another page. From there, you can add additional form fields to complete your form.
WPForms can create as many form pages as you like, but don’t forget that they will overwhelm your users. Only collect the data you need. More details can also be obtained later.
Step 3: Customize the Progress Bar
You may want to display a progress bar to let the users know about how much form they have completed. It also helps you to know how much you have left to fill in before you press “Send” based on the progress bars.
WPForms comes with three separate breadcrumb-style indication bars for your multi Phase Forms to make things super simple for you:
- Connectors: displays every part of the multi-stage form, a connecting bar and page names.
- Circles: shows one circle and page title each page on your multi-step form.
- Success Bar: displays the form progress as the user completes it.
Click on the first page break section of the first page of your multi-step form in order to customize the progress bar and page title.
In the Form Editor a new panel will appear, where you can pick which progress bar you want to use. Here you may even adjust the color of the progress indicator.
You may also change the title of the page so the users are informed of the section of the form they are on. Otherwise, users can see only a simple progress bar that directs the number of steps remaining on the multi-stage process.
Click on the page break you created after you’ve added the page break to your form to configure the next page title and move the website guests to the next page on your application.
You can also toggle on the feature that allows you show site visitors a Previous page button. This way they can return to the previous page of your form if they need to.
You would also have the ability to make modifications to the button copy too.
After all page breaks have been created, and the progress indicator has been updated, press Save.
Step 4: Configure Your Form Settings
To start with, go to Settings » General.
- Name of the form — If you want, you can modify your form name here.
- Form Description — Provide a description of your form.
- Send Text — Set the copy to the button Submit.
- Spam Prevention — Stop spam with the honeypot or Google reCAPTCHA on contact form. The honeypot function is automatically enabled in all WordPress formats, therefore unclick this option if you decide to use another spam prevention method.
- AJAX Forms – Allow AJAX setup without reloading the tab.
- GDPR Enhancement — In order to conform with GDPR requirements you should disable the storing of entry information and account data, such as IP addresses and user agents.
Step 5: Configure Your Form’s Notifications
Notifications are an excellent way to send an e-mail as soon as a form is submitted on your website.
If you do not disable the feature, you will receive a notification of the application when someone submits a multi-step form on your site.
If you use Smart Tags, once they submit a form, you can also send a notification to the user’s email address, telling them that you have received the details and will be in touch soon. This assures all visitors to the web that they have submitted their details successfully.
aIt is also a good practice for multi-page forms, which may have taken a long time to fill up. So visitors feel a lot more comfortable if they receive a confirmation that the information have been submitted successfully.
Step 6: Configure Your Form’s Confirmations
Form confirmations are notifications that show visitors to the website after a form is submitted. They tell people that their application is proceeded and gives us a chance to inform them about the next steps.
Again, it’s especially helpful for your website’s long forms.
Three types of confirmation forms are provided by WPForms:
- Message. This is the default method of WPForms confirmation. A quick confirmation message may show when a website user submits a form to make sure that the form has been submitted.
- Show Page. That method of confirmation would send guests to a particular web page to thank them for their submission.
- Go to URL (Redirect). This option is used when you want to send site visitors to a different website.
Let’s learn how to build a quick form confirmation in WPForms, so that you can customize the message that site visitors will see when they submit a form on your site.
To start, in the Settings Form Editor click on the Confirmation tab.
And pick the type of confirmation you want to create. We’ll choose Message for this example.
Then, configure the message of confirmation and press Save.
Now you can add your contact form to your website.
Step 7: Add Your Form to Your Website
You need to add it to your WordPress website after creating your multi-step template.
WPForms allows you to add your forms to several places, like sites, blog messages and dashboard widgets, on your website.
Look at the most popular location option: page / post embedding.
The WPForms widget will appear inside of your block. 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.
And publish your post or page so that you can see the form you created on your website.
Now, click the blue button in top right that says Publish/Update, so that the form can display on the website.