Multi-Page Form: would you like to create a multi-page form easily and in minutes?
Multi-Page forms can be an answer for anyone who wants to break down a long-form, which otherwise may discourage people from filling it. In this way, a user is not challenged with many questions all at once and is prompt to continue.
Additionally, you may want to use conditional logic for some of your needs, in this case, multiple page forms are a must.
Lastly, multiple-page forms allow you to increase conversion and engagement by improving user experience.
According to HubSpot:
“A multi-step form is a long-form that is broken into multiple pieces. They’re used to make long forms, such as shipping or registration forms, less intimidating and daunting. By allowing customers and leads to complete their information in smaller chunks, you create a positive user experience and increase conversions.”
MULTI-PAGE FORMS FOR BEGINNERS
How to create multi-page forms without having to code?
The pimpliest way is to use a plugin with a drag and drop editor.
The most used and download plugin form is WPForms. WPForms is the best drag-and-drop WordPress form builder plugin. And with over 3 million active installs, it’s the most beginner-friendly tool available.
Let’s get right to it.
The first step is to get WPforms.
You can have the option of a multi-page form right from the basic plan. Once you download the plugin, you have to activate it and get started.
CHOOSE A FORM
Once WPForms is installed you have to add a new form:
Once you click on add new you arrive here:
On the setup screen, name your form and select the template you want to use, depending on the type of form you’re creating. We’ll choose the Simple Contact Form template.
As a note: you can use any form and make it into a multi-page form.
Once selected here is the next page that opens up:
From this form builder area, you can add additional fields to your contact form by dragging them from the left-hand panel to the right-hand panel.
SLIPT THE FORM INTO DIFFERENT PARTS
Once you have to build your form with all the fiends you need, then it is the time to divide it up into a multi-page. You do this simply adding a “Page Breaker.”
To do this, drag the Page Break form field, found under Fancy Fields, from the left-hand panel to the right-hand panel.
Place the field where you want the form to split.
Do this everywhere you want your form to split into another page. From there, you can add additional form fields to complete your form.
You can still add fields if you need and you can create as many pages as you need.
CUSTOMIZE THE PROGRESS BAR
Based on your needs, you might want to show a progress indicator to let users know about the different sections of your form. This way they always know where they’re at on your form and how much they have left to fill out before clicking “Submit” based on progress bars.
It is important to give a visual guide so users are not left in the dark and they know they are going to get completed soon.
There are 3 different styles you can choose from:
- Connectors: shows a connecting bar and page titles of each part of your multi-step form.
- Circles: shows one circle and page title per page on your multi-step form.
- Progress Bar: indicates the progress of the form as the user fills it out.
To customize the progress bar and page title of the first page of your multi-step form, click on the First Page break section.
A section is going to comes up at your left. There you can insert the page title, so users 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.
In the Form Editor, you can choose which progress bar you want to use, and you can change the progress indicator’s color here too.
Click on the drop-down arrow next to Page Break:
To customize the next page title and the button taking site visitors to the next page on your form, click on the Page Break section you created when you added the page break to your form.
You can also toggle on the feature that lets you show site visitors a Previous page button. This way, they can return to the previous page of your form if they need to.
When you do this, you’ll have the chance to change the button copy too.
Once you’re done creating all of your page breaks and customizing the progress indicator, click Save.
CONFIGURE YOUR FORM SETTINGS
To start, go to Settings » General.
Here you can configure the following:
- Form Name
- Form Description
- Submit Button Text
- Spam Prevention
- AJAX Forms
- GDPR Enhancements
CONFIGURE FORM’S NOTIFICATION
When someone submit a multi-page form, you are going to get a notification. You can able and disable this function.
If you use Smart Tags, you can also send a notification to the user’s email address when they submit a form, letting them know you received it and will be in contact shortly.
CONFIGURE THE FORM’S CONFIRMATION
Form confirmations are sent to anyone who completed a form, to let them know that the form has been submitted. This is very important as the user know that everything is good and they will hear from you soon, or it is a possibility to give them instructions.
WPForms has three confirmation types to choose from:
- Message. This is the default confirmation type in WPForms.
- 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).
To start, click on the Confirmation tab in the Form Editor under Settings.
Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.
ADD THE FORM TO THE WEBSITE
After you’ve created your multi-step form, you need to add it to your WordPress website.
When you save and publish the post the form is going to appear on your site.
MULTI-PAGE FORMS ADVICES
Multi-page forms are are sure way to break-down long forms and increasing conversions, by reducing the work a user is confronted with. The first impression is often all what counts and if the user is not confronted with a long form, chances are, the user is going to fill it out.
Here some advice to create a great multi-page form:
- Use image selection buttons when you can
- Make the first question easy and engaging
- Use a progress bar so they know the progress made
- Don’t make too many pages
- Don’t make too many questions per page
- Overall place yourself from the viewpoint of someone filling the form and make it as easy as possible to navigate through.
You may like: