Anyone who has ever had to fill up a form will know that it’s a lengthy and boring task. That is why your potential customers might try to escape the process of filling up a form and you will see a low form conversion rate.
Here’s the fact: the longer a form is, the more likely it won’t be filled out.
So what can be done to make sure your customers don’t get bored and spend their valuable time on your forms? The answer is the Multi-Page Form.
Why Multi-page form?
1. They encourage user focus by breaking the form into groups.
2. They reduce form abandonment. It’s been noticed that a customer is 14% more likely to finish a multi-page form compared to a single-part one
3. They make the task of filling the form much more engaging.
Multi-page forms are the best way to build clutter-free forms and reduce form friction and increase conversions. With Multi-page forms, you’ll be able to split your forms into smaller chunks so it will be easy for the customer to stay engaged.
In this article, we’ll show you how you can create an engaging multi-page form in WordPress so you can get the most engagement out of your lengthy form.
So let’s dig in!
STEP 1: Install and Activate the Necessary Plugins
For this tutorial, we will install WPForms.
What is WPForms?
WPForms is a WordPress plugin that helps you create beginner-friendly WordPress forms in minutes with a drag & drop form builder. The forms you create with WPForms are easy to embed and mobile-friendly.
With WPForms you can create:
- Contact form
- Payment form
- Email subscription form
- Registration form
Other features of WPForms include:
- Multi-page forms
- Payment gateway integration
- Spam Protection
- Smart conditional logic
- Instant notifications
- Email marketing software integration
To install WPForms plugin installed on our WordPress website follow the steps given below –
1. Go to your WordPress Dashboard and click on Plugin and then click on Add New.
2. Type WPForms in the search box.
3. Click Install and then Activate.
STEP 2: Create a New Form
1. On your WordPress dashboard click on WPForms and then on Add New.
2. Choose the Simple Contact Form template. WPForms lets you add custom fields on your contact form with a simple drag and drop
3. When you choose Simple Contact Form template you’ll get Name, Email, and Comment or Message fields by default. To add more fields simply drag them from the left-hand side panel to the form builder on the right-hand side.
Since we are creating a multi-page form it’s going to be much longer than a simple contact form. So, let’s have a look at how to split your form into multiple parts.
Step 3: Split Your Form into Different Parts
After adding and customizing all the required fields on your form we will add the Page Break form field to your site to split it into different pages.
1. Drag the Page Break form field, under Fancy Fields, from the left-hand panel and drop it to the right-hand panel.
2. Carefully place the Page Break form field exactly where you want the form to split.
3. Repeat the same process where you want your form to split into another page.
4. Then you can add additional form fields to complete your form.
Step 4: Customize the Progress Bar
To keep you multi-page form flowing smoothly you need a progress bar. A progress bar is a visual indicator of your form completion progress. It shows the different sections of your form to the person filling the form.
WPForms comes with 3 different progress indicator bars for multi-step forms, they are:
- Connectors – Connecting bars and page titles for each step of your form.
- Circles – Numbered circles and page titles for every form step.
- Progress Bar – Indicator of the user’s progress as they complete form steps.
1. To customize your form’s progress bars as well as page title click on the First Page break section.
2. A new panel will appear in the Form Editor where you can choose the progress bar of your choice. Here you can also adjust the progress indicator’s title and color too.
3. 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 can also show people filling the form a previous page button.
4. You can also show people filling the form a previous page button.
5. Once you are done with customizing. Click Save.
Step 5: Configure Your Form Settings
To configure form settings, go to Settings » General.
Here you can configure the following:
- Form Name
- Submit Button Text
- Spam Prevention
- AJAX Forms
- GDPR Enhancements
Step 6: Configure Your Form’s Notifications
1. Now, we will configure email notifications for your form so we can receive an email whenever someone submits a form.
2. If you use Smart Tags, you can also send a notification to the user’s email address when they submit a form.
3. Next, Configure Your Form’s Confirmation messages that display to site visitors once they submit a form on your website.
Step 7: Add Your Form to Your Website
Now, the last step is to add the multi-page form that you have created to your website. You can add this form on your pages, blog posts, and sidebar widgets.
For this example, we will add it to a custom page:
1. On your WordPress dashboard > Click on Pages > Add new
2. Name the page
3. Now, head over to the (+) icon so you can add a block on your page.
4. Type WPForms like in the picture given below and choose the form. Select your multi-page form and click on Add Form.
5. Now, publish your page so your Multi-page form will appear on your website.
Voila! You have successfully added a Multi-page form on your WordPress website with the help of WPForms.
As you can see, it is extremely easy to create an effective WordPress multi-page form this way. With the WPForms multi-page forms feature, even your longest forms will appear much easier to fill out for your visitors.