Creating a Multi-Step Form in Fluent Forms  

Multi-step forms are an effective way to collect more data from users without overwhelming them. Breaking down the form into multiple steps makes the process less daunting and more manageable for users. This article will guide you through creating a multi-step form with Fluent Forms.

Remember, to create and manage multi-step forms in WordPress, you need to install and activate the Fluent Forms Pro Add-on.

Creating a Multi-Step Form #

To learn how to create a Multi-Step Form, follow the steps with screenshots below – 

Initially, you can choose Pre-built Templates or start with a Blank Form. Let’s begin with a Blank Form so you can build it from scratch.

Once you are on the Editor page, click the Plus Icon, open the Advanced Fields section, and choose the Form Step field.

The Advanced Fields option is also in the right sidebar under the Input Fields tab. To set it up, click on the Form Step field you want or drag and drop it into your editor.

The Form Steps are divided into Three steps. These are:

• PAGING START
• PAGE BREAK
• PAGING END

The form steps mentioned above are explained below:

1. Paging Start #

Paging is the first part of the Form Step input field. This section contains the first page of the multiple-page form.

Now, add the desired fields you want to show in the first part of the form and it will automatically load into the Paging Start section.

Also, you can customize this part by clicking the Pencil/Edit Icon when hovering over the field.

All the customization options mentioned above under the Input Customization tab are briefly explained below:

A) Element Class: Add custom CSS classes to the input field itself.

B) Progress Indicator: You will find three options for the indicator bar style here. 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 of “1 of 4 steps completed”).
• Steps: Selecting Steps will show users the names of the steps in the form so they can visualize their progress.
• None: Choosing None will show users no progress indicators.

C) Animation Type: You can control the animation for transition from pages based on the Slide Left/Right, Fade In/Out, Slide Down/Up, and None (No animation will be used) options.

D) Step Titles: Fields to enter custom titles for each step of the form. In Step 1, you will enter a title for the first step, and in Step 2 you will enter a title for the second step.

E) Disable auto focus when changing each page: By default, enable auto focus or auto-scroll. You can easily disable autofocus by enabling this checkbox.

F) Enable auto page change for single radio field: This option is disabled by default. When enabled, the form will automatically proceed to the next step after the user completes the last field in the current step.

Watch this Video Tutorial to learn the process of multi-step forms automatically to the next-step form in Fluent Form.

G) Enable Per step data save (Save and Continue): This option is disabled by default. If you enable it, however, it will save the data entered in each step as the user progresses through the form, allowing users to resume the form from where they left off.

• Resume Step from last form session: If your website has a sticky header menu, you might encounter problems, such as the form being hidden beneath it while auto-scroll is enabled.

2. Page Break #

The Page Break section creates new steps within the form. Each time you add a Page Break, a new section is created for the next step.

You can customize this part by clicking the Pencil/Edit Icon when hovering over the field.

1. Previous Button: Choose between a Text button or an Image icon in the prior page button. Also, can customize the text or add an image link for the last button.
2. Next Button: Like the Previous Button, choose between a Text button or an Image icon for the next page. Also, can customize the text or add an image link for the following button.
3. Element Class: Add custom CSS classes to style the input field.

3. Paging End #

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

You can also customize this part by clicking the Pencil/Edit Icon when hovering over the field.

1. Element Class: Add custom CSS classes to style the input field.
2. Previous Button: Choose between a Text button or an Image icon for the previous page button. If you choose the Default option, you will get the Previous Button field to customise the text. If you select the Image option, you can add an image link for the previous button.

Embed the Form into Frontend #

Once you complete the customization, click the Save Form button to save all your changes. Click the Preview & Design button in the middle to see the form preview.

To integrate and display the form on a specific page or post, copy the Shortcode from the top right side and paste it into your desired page or post. 

Preview of Added Form Step Field #

Here is the preview of the added Form Step field under the Form. 

This way, you can create as many Multi-step Forms as you want with Fluent Forms.
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our @support team. Thank You.