---
title: "Creating a Multi-Step Form in Fluent Forms  "
description: "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…"
url: "https://fluentforms.com/docs/creating-a-multi-step-form-in-fluent-forms/"
updated: "2026-05-21"
category: Field Types / Advance Fields
---

# 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](https://fluentforms.com/).

> Remember, to create and manage multi-step forms in WordPress, you need to install and activate the [Fluent Forms Pro Add-on](https://fluentforms.com/docs/how-to-upgrade-to-fluent-forms-pro/).

[Quickly Create a Multi Step Form with your Form Builder | WP Fluent Forms](https://www.youtube.com/embed/VQTWnM6BbRU?feature=oembed)

## 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](https://fluentforms.com/docs/using-and-customizing-pre-built-quick-forms-in-fluent-forms/) or start with a [Blank Form](https://fluentforms.com/docs/how-to-create-a-form-with-fluent-forms/). 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.

![1. Adding Form Step field 1 scaled 45139](https://fluentforms.com/wp-content/uploads/2024/12/1.-Adding-Form-Step-field-1-scaled.webp)

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

- **PAGING START**
- **PAGE BREAK**
- **PAGING END**

![2. Paging Start Break End steps scaled 45139](https://fluentforms.com/wp-content/uploads/2024/12/2.-Paging-Start-Break-End-steps-scaled.webp)

**The form steps mentioned above are explained below:**

## 1. Paging Start

The **Paging Start** block controls the global indicator behavior and styles for the multi-step sequence. Hover over the **PAGING START** bar in your editor and click the **Pencil Icon** to open the **Input Customization** settings.

### Progress Indicator

The **Progress Indicator** setting controls how step progress is shown at the top of a multi-step form. **You** can choose between four distinct layout styles:

- **Progress Bar**: Displays a standard progress bar that gives users a numeric percentage indication of their progress (e.g., "1 of 2 steps completed").
- **Steps**: Displays a numbered list of structural step titles with the current active step highlighted.
- **Tabs**: Renders step titles as interactive, clickable tab buttons. This configuration allows visitors to quickly jump back to any previously completed step in a single click.
- **None**: Completely hides all progress indicators from the form interface.

> **Tip:** Whichever indicator **you** pick, the values **you** enter in the **Step Titles** section become the labels. If left blank, Fluent Forms falls back to Step 1, Step 2, etc.

### Tabs Indicator Settings

When **you** select **Tabs** as your progress indicator, two additional sub-settings will appear immediately below:

**Tab Position**: Determines the structural layout orientation of your step tabs:

- **Top** (Default): Tabs align horizontally above the form. If they overflow the screen width, they scroll horizontally rather than wrapping.
- **Left**: Tabs render vertically in a sidebar column to the left of the form body, making it ideal for a large number of steps or long step titles.

**Show Progress Bar Under Tabs**: Toggle this checkbox to position a compact visual progress bar directly beneath the horizontal tab strip. This is disabled by default.

### Animation & Page Controls

- **Animation Type**: Choose the transition style when moving between steps (**Slide Left/Right**, **Fade In/Out**, **Slide Down/Up**, or **None**).
- **Step Titles**: Enter personalized text labels for **Step 1**, **Step 2**, etc., to replace the default step text.
- **Disable auto focus when changing each page**: Check this to stop the page from automatically scrolling to the top of the form when a user changes steps.
- **Enable auto page change for single radio field**: When enabled, the form will automatically transition to the next step immediately after a user selects an option in the last radio field of the current step.
- **Enable Per-step data save (Save and Continue)**: Saves the form input data locally step-by-step as the user proceeds, letting them safely resume if they leave mid-session.
- **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](https://fluentforms.com/docs/set-scroll-offset-of-form-steps/) is enabled.

> Watch this [Video Tutorial](https://youtu.be/TQAw19OoCSU) to learn the process of multi-step forms automatically to the next-step form in Fluent Form.

![paging start 4 scaled 45139](https://fluentforms.com/wp-content/uploads/2025/06/paging-start-4-scaled.webp)

## 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.

![5. Edit Page Break step scaled 45139](https://fluentforms.com/wp-content/uploads/2024/12/5.-Edit-Page-Break-step-scaled.webp)

## 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.

![6. Edit Page Ending steps scaled 45139](https://fluentforms.com/wp-content/uploads/2024/12/6.-Edit-Page-Ending-steps-scaled.webp)

### Embed the Form into Frontend

Once you complete the customization, click the **Save** **Form** button to save all your changes. Click the **Preview & Design**buttonin 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. 

![Save Form 05 8 scaled 45139](https://fluentforms.com/wp-content/uploads/2025/02/Save-Form-05-8-scaled.webp)

### Preview of Added Form Step Field

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

![preview step form 45139](https://fluentforms.com/wp-content/uploads/2025/06/preview-step-form.webp)

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](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank You.