Do you have long forms on your website or online store?
Looking for how to create multipage forms in WordPress?
By creating multi-page forms, you can divide your long forms into pages that will provide a good user experience and easy to fill your long forms.
It won’t just provide the good user experience, rather will help you to increase the engagement and conversion.
You can easily create any kind of forms (including multi-page form) using WPForms WordPress form builder.
WPForms is a drag-n-drop WordPress form builder that makes easy to create any kind of forms like contact forms, registration forms, survey forms etc with its easy to use interface, even if you don’t have technical knowledge.
How To Create Multi-Page Forms In WordPress Using WPForms?
Now let’s see how you can create multi-page form in WordPress using WPForms.
If you prefer video then watch the below video to learn how to create multi-page forms in WordPress.
If not, then take the step by step instructions to create a multi-page form in WordPress using WPForms.
Step: 1 Create A Form
Before doing anything, you need to install the WPForms in your WordPress website which you can easily do by going to Plugins>Add New and search for the WPForms.
Click Install and then Activate to make it live on your WordPress website.
Once the plugin is installed into your site, you need to create a form. Go to WPForms>Add New.
You don’t need to choose any specific template here because you can split any form into different pages.
Let’s say I want to create a simple contact form then I would go with the Simple Contact Form template.
You will see some basic fields already added into your contact form because you used the simple contact form template.
You have following fields already added into your contact form:
- Name
- Comment or Message
- Submit button
Now you can customize this form as per you wish, you can add additional fields to your form by drag-n-drop from left side menu.
Step: 2 Split Your Form Into Pages
Now the most important part comes which will make your simple contact form, a multi-page form.
For splitting your form into multiple pages, you need to drag the Page Break from the left side add fields section and place the field where you want the form to split.
You can do the same everywhere you want the form to split and can create as many pages as you want. Add more additional fields after the page break section to ask more details from the users.
Step: 3 Customize The Progress Bar
Adding a progress bar can make your form more amazing and attract users to complete it. But yes course, it is based on your need, if you are creating a survey form and create pages according to the information you want to collect.
So, in this case, adding a progress bar can improve the look of your form.
By this, you are allowing your users to see where they are at your form and how much left to complete the form.
WPForms makes it easy because it offers you three different breadcrumb style indicator bars for your multi-page form.
- Connectors: shows a connecting bar and page titles of each part of your multi-page form.
- Circles: shows one circle and page title on each page of your multi-page forms.
- Progress Bar: indicates the progress of the form as the user fills it out, it helps in knowing how much part is remaining.
You can customize the progress bar and page title by clicking on the first page break.
Some options will appear on the left-side panel where you can choose the progress bar you want to use and progress indicator’s colour to match your theme colours.
You can also change the title of your page from the same options. But you can add the page title only if you choose the Circles or Connectors.
For customizing the next page title and button which is taking visitors to next section of the form, Click on the Page Break section.
You can also add the Previous page button. By doing this, you can allow your users to navigate the form pages.
They can easily return to the previous page of your multi-page form to make the changes if they want to.
Once you are done with customizing progress bar and adding all pages of your multi-page form, click to Save button save all the changes you made.
Step: 4 Configure Form Settings
To configure the settings of your multi-page form, go to Settings>General.
You can see the following settings there:
- Form Name: You can change the name of your multi-step form if you want to.
- Form Description: You can add the form description from here.
- Submit Button Text: By default, your multi-step form comes with Submit text on the button because you used a pre-build simple contact form template, you can change the button text here.
- Spam Prevention: Do you get spam form entries through your forms placed on your site? WPForms offers amazing features to prevent spam form entries. You can use the Honeypot or Google reCaptcha to prevent spam on your multi-page form.
- AJAX Forms: Enable AJAX settings with no page reload. Learn more about AJAX forms here…
- GDPR Enhancements: You can check this if you want to disable the storing of entry information and user details like IP addresses and user agents, to comply with the GDPR.
Don’t forget to hit the Save button when you are done with all the pages.
Step: 5 Configure Notification Settings
General settings of your form are done…
Now it’s time to configure the notification settings of your multi-page form.
To configure, go to Settings>Notification…
You can configure the email notification whenever someone submits your multi-page form.
But the best thing here is, you can send the email to users who submit your multi-page form by using Smart Tags. You can use the smart tags and inform them that you received their form submission and will contact them soon.
This help visitors to assure that you received their form submission.
You can click on Show Smart Tags to see all the available tags you can use for each field.
If you want to send the notifications to visitors also then click on Show Smart Tags for Send To Email Address field and choose the Email field
Click on Save when you are done…
Step: 6 Configure Confirmation Settings
Through Confirmation settings, you can set up the message you want to show users when they submit your multi-page form. Or, you can redirect them to any page within or outside of your website.
There are three types of Confirmation:
- Message: This is set by default by WPForms. If visitors submit your form, a confirmation message will be shown to them. You can customize the message by going to Settings>Confirmations.
- Show Page: You can send visitors who submitted your multi-page form to any page in your site.
- Go To A URL (Redirect): If your confirmation page is hosted anywhere else, not on your site. You can use this confirmation type to redirect form submitter to an outside URL.
Confirmation helps users who submitted your form to be assured that the form has submitted successfully.
You can edit the confirmation message by going to Settings>Confirmation.
Step: 7 Place Form To Your Website
Now your form is complete and ready to be placed on your website.
You can easily do this, WPForms offers shortcode that you can copy and paste wherever you want to place your form.
To place your multi-page form, create a new page or post or edit any existing page/post if you want to place your form in any existing page or post. You can paste the shortcode on the page to show the form.
Or, click on + to add a block using Gutenberg editor, then select WPForms.
Once the WPForms widget added to your page, choose the form from the dropdown you want to show on the page.
After choosing your multi-page form, hit the Publish or Update button to make your page/post live.
You have done it!
Now you know how to create multi-page form in WordPress using WPForms.
WPForms is the no.1 drag-n-drop WordPress form builder that makes easy to create any kind of form in WordPress website.
Now you can divide your long forms into different pages with a progress bar that will provide a good user experience as well as increase the engagement and conversion.
I hope you found this post useful if you did then must share it with others.
Here are some other WPForms tutorial post that you might want to read:
