Creating Form Steps in WP Fluent Form 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 Form makes it super easy.

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.

creating form steps WP Fluent Form WordPress Plugin WPManageNinja

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 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 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”).
    creating form steps WP Fluent Form WordPress Plugin WPManageNinja
    – Choosing Steps will show users the names of the steps in the form. So that they can have a visual idea of their progress.
    creating form steps WP Fluent Form WordPress Plugin WPManageNinja
    – 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.
creating form steps WP Fluent Form WordPress Plugin WPManageNinja

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.
creating form steps WP Fluent Form WordPress Plugin WPManageNinja

Paging End

The last portion of the Form Step is 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.
    creating form steps WP Fluent Form WordPress Plugin WPManageNinja

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?

5

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