Merilyn's Blog https://wp.djangodemo.com Developer Supporter and Educator Tue, 09 Mar 2021 13:33:06 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 How to Add Multi-step Forms to WordPress Using Forminator https://wp.djangodemo.com/2021/03/08/how-to-add-multi-step-forms-to-wordpress-using-forminator/ https://wp.djangodemo.com/2021/03/08/how-to-add-multi-step-forms-to-wordpress-using-forminator/#respond Mon, 08 Mar 2021 23:07:30 +0000 https://wp.djangodemo.com/?p=17 read more]]> 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.

Forminator: Steps | Progress Bar

Forminator: Steps | Progress Bar

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

    Forminator: Select Forms

  2. Select a blank template. Click Continue.

    Forminator: Blank Template

    Forminator: Blank Template

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

    Forminator: Blank Form Name

    Forminator: Blank Form Name

  4. Click INSERT FIELDS to insert a new field.

  5. Select Section and click INSERT FIELDS.

    Forminator: Select Section

    Forminator: Select Section

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

    Forminator: Section Title and Subtitle

    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

    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

    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

      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 Steps Settings

      Forminator: Pagination Progress Settings


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

      Forminator: Steps Pagination


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

      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

    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

    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

    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.

Forminator: Embed Form

Forminator: Embed Form

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.


]]>
https://wp.djangodemo.com/2021/03/08/how-to-add-multi-step-forms-to-wordpress-using-forminator/feed/ 0