Creating Form Steps in Fluent Forms

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 Fluent Forms Pro makes it super easy.

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

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 their choice.
  • Progress Bar: 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 the form “1 of 4 steps completed”)
  • 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.

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 been created to input a new field for the next step.

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

  • Previous Button: Choose from the two options:
    – Choosing Default shows a Text button for the previous page
    – Choosing an Image shows an icon of your choice.
  • Previous Button Text: 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 an 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.
  • Element Class: Add custom CSS classes to the input field itself.

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 the 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 an Image shows an icon of your choice.
  • Previous Button Text: Edit the previous button text or add the icon link to show an image.

This guide will help you to set up Form Step in your form which will give you an opportunity to create a multi-page form on your form.

Disable Auto-Scroll

Auto-scroll is enabled by default on your step form. You can disable auto-scroll by enabling this checkbox.

Disable auto-scroll fluent form.png

Enable Auto Page

Auto page change is disabled by default on your step form. You can enable auto-page by selecting this checkbox. If you enable this then for last radio item field will trigger the next page change. For more details, click here

Enable Per Step Data Save

If you enable this then on each step change the data current step data will be persisted in a step form
Your users can resume the form where they left it. Follow this simple guide

Set Scroll Offset

If your website has a sticky header menu, you might face some problems such as the form being hidden beneath the header menu while auto-scroll is enabled. To solve the problem, you can follow this guide

Tags , ,

Was this article helpful to you?

14 2

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