Creating Form Steps in WP Fluent Forms WordPress Plugin

Form Step field allows you to create multi-step forms. Multi-step forms let you collect more data without scaring the users away. Creating and managing a multi-step form is not so easy in WordPress unless you use suitable tools for it. In this case, the WP Fluent Forms makes it super easy.

*Please note that this video was recorded with our previous version , we are going to upload video tutorial with the current version very soon.

Here goes a glimpse of how Step Forms work and make lives easier for end users:

Creating Form Steps WP Fluent Form WordPress Plugin WPManageNinja

To add steps to your form, drag and drop the Form Step button from the Advanced input fields.

form-step

The Form Step comes in 3 parts. These are described below.

Paging Start

This is the first part of the Form Step input field. This section contains the first page of the multiple page form. When we add the first part of the form, it will automatically load into the Paging Start section.

You can customize this part by clicking the edit icon get when hovering over the field.

  • Element Class: Add custom CSS classes to the input field itself.
  • Progress Indicator: You will find three options here to choose the indicator bar style. Users will see the progress of the form steps according to your choice.
    – Choosing
    the Progress Bar will show users a progress bar in the form. So that they can have a numeric idea of their progress (in a form of “1 of 4 steps completed”).
    form-step
  • – Choosing Steps will show users the names of the steps in the form. So that they can have a visual idea of their progress.
    form-step
  • – Choosing None will show users no progress indicators.
  • Step Titles: If Progress Bar or Steps is chosen in Progress Indicator option, Name the steps in Step Titles.

Page Break

Page Break portion of the form automatically creates a new step or section. Every time you need to create a new step, just click or drag and drop Form Step on the builder point. Then you will find that a new space has created to input a new field for the next step.

You can customize this part by clicking edit icon get when hovering over the field.

  • Element Class: Add custom CSS classes to the input field itself.
  • Previous Button: Choose from the two options:
    – Choosing Default shows a Text button for the previous page
    – Choosing Image shows an icon of your choice.
  • Previous Button Text/Image: Edit the previous button text or add the icon link to show an image.
  • Next Button: Choose from the two options:
    – Choosing Default shows a Text button for the next page
    – Choosing Image shows an icon of your choice.
  • Next Button Text/Image: Edit the Next button text or add the icon link to show an image.

Paging End

The last portion of the Form Step is the Paging End section. It determines the ending of the multiple pages form.

You can customize this part by clicking edit icon get when hovering over the field.

  • Element Class: Add custom CSS classes to the input field itself.
  • Previous Button: Choose from the two options:
    – Choosing Default shows a Text button for the previous page
    – Choosing Image shows an icon of your choice.
  • Previous Button Text/Image: Edit the previous button text or add the icon link to show an image.

Form Step Field TypeThat’s it! I hope this tutorial helped you to set up Form Step in your form that will give an opportunity to create a multi-page form on your form.

Tags , ,

Was this article helpful to you?

6

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket