How To Create an Engaging Multi-Page Form in WordPress?

Multi-Page Form

WPForms is the best WordPress plugin to create a form for your site. Recently, I have written a few articles about WPForms and its feature.

It allows us to integrate with PayPal and Stripe to make the payment-related transaction easier. You can check out the below articles.

WPForms offer us to create a multi-step form to increase user engagement. The multi-step forms mean we can break the form into multiple pages as per the requirement.

NOTE- If you want to create multi-page forms using WPForms, you will have to purchase the premium version of WPForms.

In this article, I will tell you how to create multi-step forms in WordPress using the WPForms plugin.

Create a Form in WordPress

The first step is to install the WPForms plugin and activate it.

Once you activate it, you can create a form. You can refer to the detailed article about how to create Forms using WPForms.

OR, you can follow the below steps.

Go to WPForms » Add New to create a new form.

You will get the predefined templates for forms. You can choose anyone which you prefer. Here I am going to use the simple contact form for tutorial purposes.

Once you choose the simple contact form, you can customize it as per your requirement. You need to click on the field and you will get the customization options to the left side panel.

By default, you can see the Name, Email, and Message fields.

You can add new fields present in the panel or delete them as per the requirement.

Multi-Step Forms

Once you have completed the customization of the forms, you can now add the page break form field to split your form into multi-page.

You can drag and drop the page break field to your form to split the form.

You can add page breaks wherever you want and customize the form. For example, you can group the fields as per the information like Personal information, Payment details, etc.

Progress bar

You can show the progress bar to users to let them know about the different sections and progress of the form completion. Also, the users know how many forms are left to fill.

WPForms offer three different types of breadcrumb style indicator bars for your multi-step forms.

  • Connectors- It shows the connecting bars and the page titles of each form below the bars.
  • Circle- It shows the circle and page title on the forms.
  • Progress bar- It shows the progress of the forms as the users fill them out.

You can customize the progress bar as well. Click on the first-page break section. You will be redirected to the progress bar editor.

You can choose the Progress Indicator as mentioned above, whichever you want. You can also choose the color for the page indicator.

Also, you can add the page title so that users will know which part of the form they are on or filling it.

All the above customization is for the first-page form. If you want to customize the second page, click on the page break field you created above.

You can add the second-page details like page title and the text label, which will appear as a button for the next page.

You can also add the previous page button, which helps users to go to the previous page and edit the information which they missed out on in the first place.

Click on display previous, and you will see the previous label. You can add anything like the previous page.

Once you customize all the pages of the forms, you can save them.

Configure form settings

To configure the multi-page form, go to Settings » General.

You can configure the following.

  • Form name and description
  • Submit button text and its processing text
  • Spam prevention- Enable the anti-spam feature to prevent automatic spambot submission.
  • GDPR Enhancement- You can disable the storing information of users to comply with the GDPR requirement.

Configure form notification

To get the notification when the user submits the form, you will have to configure the notification. By default, it is enabled for all the forms.

Configure the Form confirmation

You can let the user know the Confirmation of the successful form submission. WPForms supports the three different kinds of Confirmation.

Message- This is the default confirmation message that displays after the form submission. You can customize the message.

Display page- You can display a customized page after the file upload form submission.

Redirect– You can redirect the users when they submit the form to the new URL.

To configure the confirmation message, click on the Confirmation in the form editor under the setting.

Choose the confirmation type and customize the message as per your needs. You can add the URL to the new page.

Add form to your site

The final step is to add the file upload form to your WordPress. Then, you can add them to your posts, pages, etc.

In the post/page editor, click on the add block and choose WPForms, or you will directly see the WPForms icon.

When you click on it, you will get the dropdown of all the forms you created.

Once you complete all configurations, click on the publish page/post so that your multi-step form will go live.

To create the multi-step form you need to have the premium version of the WPForms.

Final Words

The multi-step form is useful for user engagement, and WPForms allow us an easy way to create it. If you want to create multi-page forms in your WordPress blog, you will have to purchase the premium version of the WPForms plugin. You can get all the premium features and addons with it.

You’ll love to read about WPForms

The following two tabs change content below.

Amit Kharbade

Editor & Writer at ScrollBucks
Software engineer by profession and Blogger by passion. Amit has been contributing to ScrollBucks since 2014. He is writing about Blogging and his practical blogging experiences. You can connect with him at scrollbucks@gmail.com

Latest posts by Amit Kharbade (see all)

Leave a Comment