How to Add Multi-step Forms to WordPress Using Forminator

Introduction

Data. We live in a world that is inundated with data. We absorb a lot of information around us and we also give out information when necessary or voluntarily. To interact with a website, for instance, we are often presented with an HTML form, such as on a Contact Us page. On an e-commerce website, we can inquire about a specific product if there is a form associated with the product.

Forms can be as simple as a single email address collection for a newsletter subscription to a lengthy job application or better yet, a tax filing. Although we are used to filling out a multi-page form at the doctor’s office, however, when it comes to online forms, we might be hesitant. Unless there is a compelling reason or incentive, coupled with the form-filling process being manageable, intuitive, and somewhat painless, we might be dissuaded from completing a lengthy form. Hence, a website should offer a pleasant online user experience when collecting a significant amount of data from its intended audience.

What is a Multi-step Form?

A multi-step form is a form presented to the user in stages. A practical multi-step form informs the end-user of the process it will take to complete the form ahead in advance. Typically, the form filer will see where they are in the process if they notice a progress bar or a step counter somewhere on the multi-step form.

Why Would You Use a Multi-step Form?

You would use a multi-step form if you find yourself in one or more of these situations:

• You have a lot of data to collect and you can organize them into clear sections.
• Your data can be organized based on rules and conditions and different steps can be performed depending on prior steps.
• Your audience may prefer a multi-step form if they can pause and complete the form later.
• You want to potentially convert more of your site visitors to leads.

What is Forminator?

Forminator is a popular WordPress form builder plugin that creates interactive forms, quizzes, and polls. Supporting more than two dozen field types including payment types (PayPal and Stripe), mathematical calculations and e-signature, Forminator provides an easy-to-use intuitive interface to create a multi-step form. Let’s dive into how to create one with Forminator.

How to Create a Multi-step Form with Forminator

1. In the Forminator sidebar menu, select Forms or select CREATE on the main screen to create a new Form.
   

   

   Forminator: Select Forms

2. Select a blank template. Click Continue.
   

   

   Forminator: Blank Template

3. Enter a Name for your form. Click Create.
   

   

   Forminator: Blank Form Name

4. Click INSERT FIELDS to insert a new field.

5. Select Section and click INSERT FIELDS.
   

   

   Forminator: Select Section

6. Enter a section Title and optional Subtitle. Click APPLY.
   

   

   Forminator: Section Title and Subtitle

7. Insert additional fields of your choice.

8. Insert a Page Break field to add a new page to your form. Click INSERT FIELDS.
   

   

   Forminator: Page Break Field

9. A Pagination section is automatically added at the top of the Edit Form screen when the first Page Break field is added.
   

   

   Forminator: Pagination Section

   • Click on the Edit Field gear icon of the Pagination section to customize the pagination of your form such as Labels and Settings.
     
     

     Forminator: Edit Pagination

     
     In the Pagination Settings tab, you can choose to show or hide progress settings for your multi-step form. Select either Steps or Progress Bar. Then, click APPLY.
     
     

     Forminator: Pagination Progress Settings

     
     If you select Steps, your multi-step form will show your form pages as numbered steps.
     
     

     Forminator: Steps Pagination

     
     Alternatively, if you select Progress Bar, your multi-step form will show the progress in percentages:
     
     

     Forminator: Progress Bar Pagination

10. Continue to insert additional fields of your choice (Forminator has more than two dozen field types!) and add page breaks until your multi-page form is complete.

11. The last field, Send Message, is added to the form by default. It can be customized but not deleted.
    

    

    Forminator: Send Message Field

12. At any time of your form building, save your form with SAVE DRAFT. Preview your form with PREVIEW. When you are ready, publish your form with PUBLISH.
    

    

    Forminator: Save Draft | Preview | Publish

    
    After publishing, you will be presented with a screen to show you the embed code for your form.
    
    

    Forminator: Shortcode

How to Embed Your Form into a WordPress Page or Post

To embed your published form to your WordPress page or post, simply add the Forminator shortcode in the editor, save and publish and you are good to go.

Multi-step Form Demo

Here’s a sample multi-step form that we have just created. Take it for a spin and if you would like more information about Forminator, please don’t hesitate to consult the documentation here. Thank you for reading.

1 - Welcome!

Tell us a bit about yourself.

Name *

Email Address *

Phone *

Website