Recently, one of our users asked us how to create a multi-page form in WordPress? Multi part forms allow you to collect more information without scaring the users away. In this article, we will show you how to create a multi-page form in WordPress.
Why and When You Need Multi-Page Form in WordPress?
Forms are the easiest way to collect data and get in touch with your users. Whether it is a contact form, email capture form, or a simple survey.
However, lengthy forms are daunting for users and increases form abandonment.
To overcome this issue, user experience experts recommend multi-page forms. This way form fields are broken into sections and pages.
With a progress bar on top and fewer fields on screen, users feel more at ease filling out the form. It provides a more engaging and interactive experience to your users.
Having said that, let’s see how to easily create a multi-page form in WordPress.
If you don’t like the video or need more instructions, then continue reading.
Creating A Multi-Page WordPress Form with WPForms
You can use the WPForms coupon: WPB10 to get 10% discount on your purchase of any WPForms plan.
Upon activation, you will need to enter your license key. You can get this key by signing into your account on WPForms website.
Copy the license key and then visit WPForms » Settings page on your WordPress site. Paste the license key and then click on the verify key button.
After verifying your license key, you are now ready to create your first multi-page form in WordPress.
Simply go to WPForms » Add New page, and it will launch the Form Builder.
Provide a title for your form and then select one of the templates shown below. WPForms offers ready-made form to speed up the form creation process.
You can choose the one that closely matches your form requirements or choose a blank form. Clicking on a template will launch the form editor.
Simply click on the fields from left column to add them into your form. After that click on a field in the form to edit it. You can also drag and drop form fields.
After adding a few form fields, you are ready to add a new page to your form. Click on the Pagebreak field under fancy fields sections from the left column.
You will notice that WPForms will add a pagebreak marker to the bottom and a first page marker at the top of the page.
It will also push the submit button to the next page, and your first page will now have a ‘Next’ button instead.
Click on the first page marker at the top to edit your multi-page form properties. In the left hand column, you can select a progress bar type. WPForms allows you to use a simple progress bar, circles, connector, or no progress indicator at all.
For this tutorial, we will be using Connectors as progress bar. You can also choose the color of your page indicator. Lastly, you can provide a title for the first page.
Now you need to click on the pagebreak marker to edit its properties. Here you can provide a title for the next page. You can also edit the text to display on the Next button.
You can continue adding form fields after the pagebreak. If you are using the PRO version of WPForms, then you can also use conditional logic to show and hide form fields based on user responses.
After adding more fields, you can add more pagebreaks if you need.
Once you are done creating your form, click on the save button on the top right corner of the screen.
Congratulations, you have successfully created your first multi-page form.
Adding Your Multi-Page Form into WordPress Posts and Pages
WPForms makes it super easy to add forms into WordPress posts and pages.
Create a new post/page or edit an existing one. On top of the post editor, you will see an ‘Add Form’ button.
Clicking on it will bring up an insert form popup.
Select your form from the drop down list and then click Add Form button.
You will notice WPForms shortcode added into your post/page. You can now save or publish this post or page.
Visit your website to see your multi-page form in action.
We hope this article helped you add a multi-page form in WordPress. You may also want to see our guide on how to add a contact form popup in WordPress.