How to Create Professional Looking Multi-Page Forms on WordPress

Did you know that WordPress can create multi-page forms?

Multi-page forms allow you to visualize the process, show users how far along they are in a form. It enhances usability if users can easily navigate between each page and jump to a different step if they want.

It looks like this:

It looks difficult to create and embed multi-page forms to your WordPress site, right?

DISCLOSURE: This post may contain affiliate links, meaning I get a small commission if you decide to make a purchase through my links, at no additional cost to you. This is a sponsored blog post, but all opinions are my own. Please read my full disclaimer here for more info.

But, no. It’s actually super easy if you use a WordPress plugin called Wpforms. In this article, you’ll learn how to create professional-looking multi-page forms on WordPress using WPForms.

First of all, what is Wpforms

WPForms is a beginner-friendly WordPress plugin that allows you to create a powerful but affordable form builder. It’s a drag & drops WordPress form builder, so you don’t need any coding knowledge.

You can create contact forms, payment forms, survey forms, newsletter forms, registration forms, etc.

WPForms has 4 licenses:

• Basic $79 a year
• Plus $199 a year
• Pro $399 a year
• Elite $599 a year

In order to create multi-page forms, you’ll need at least the Basic license.

Tips: Use the benefit of special deals! WPForms offer special deals sometimes. During the time, the prices go down to:

• Basic $39.50 a year
• Plus $99.50 a year
• Pro $199.50 a year
• Elite $299.50 a year

If you don’t like WPForms over the next 14 days after purchase, then you get a full refund.

Step-by-Step Guide – How to Create an Engaging Multi-Page Form

So, let’s assume that you want to create job application pages on your WordPress site.

Step 1: Create a Form in WordPress

Login to your WordPress account and click Wpforms > Add New > name your form.

Scroll down to Additional Templates and type “Job” in the search bar.

You’ll find a job application form pre-design template. Click it.
The job application form pre-design template has a few different fields which are pretty long.

You can add fields by clicking and dragging additional fields from the left side. (from fields list) You can also delete some fields by hovering over it and clicking on the trash can icon.

Step 2: Split the Forms

Once you’ve decided the input fields, let’s split the form into three parts.

Go to the fields list. Under the Fancy Fields section, you’ll find the Page Break.

Click the Page Break and drag over to the right side. (your form side) Place it wherever you’d like the form to split into another page. (you can add as many Page Break as you’d like!)

Step 3: Create a Progress Indicator

What is the progress indicator? It is a visual element that shows users where they are in the form and how much more they left.

To create this progress indicator, scroll up all the way to the top. Find the First Page/Progress Indicator field label.

When you click on it, you’ll see some additional settings on the left side page. There are three types of progress bar you can choose from:

#1 Connectors: shows a connecting bar and page titles of each part of your multi-step form.

#2 Circles: shows one circle and page title per page on your multi-step form.

#3 Progress Bar: indicates the progress of the form as the user fills it out. I personally like this one. “Step 1 out of 3.” I usually fill the form or survey on mobile devices using my spare time. Progress indicators like this help me to estimate the time to fill them all.

If you don’t want to use a progress indicator, you can choose None. You can also customize the color of the progress indicator and add a title for each page.

For example, “Profile page,” “Position page,” “Experience page,” and “Skill Page” etc.

If you turn on Display Previous, the form will have a Previous and Next button. This really increase usability.

Step 4: Setup Notification Settings & Confirmation Settings

Go to the menu bar and click Settings. Then, click Notification. On this page, you can set up form notification go to which email address.

For the confirmation settings, click Confirmations on the menu bar. (it’s under the Notification) There are three types of confirmation after the user submitted the form such as Message, Show Page, and Go to URL.

Once you chose the confirmation type, Save the page!

Step 5: Add Your Form to Your Website

Go to your dashboard and click Page > Add New.

Add page title and click the plus icon. Scroll down to Widgets and click the WPforms icon. If you can’t find it, use the search bar!

Now you see the WPForms forms list, so choose the form you’ve created.

Hit publish and done!

Using WPforms really increase the overall user experience. If users can have more control, reduces frustration! Good user experience will enhance the brand images too. If you want to know more about Wpforms, please visit their site here.