How to Create a Multi-Page Form in WordPress

102

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.

Creating 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.

A multi-step checkout page example

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.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Creating A Multi-Page WordPress Form with WPForms

We will be using WPForms which is the most beginner friendly contact form plugin for WordPress. You will need at least the Basic license which costs $39.50.

You can use the WPForms coupon: SAVE50 to get 50% discount on your purchase of any WPForms plan.

First thing you need to do is install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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.

WPForms license key

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.

Adding a new form in WPForms

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.

Form editor in WPForms

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.

Adding form fields in WPForms

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.

Adding pagebreak field

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.

Edit first page marker to select progress bar type

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.

Edit page title and next button text

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.

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.

Select and insert your multipage form

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.

Preview of a paged form in WordPress

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.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.