How to Create a Multi-Step Forms in Gutena Forms

Long forms can be difficult to complete when all fields appear on a single page. Gutena Forms allows you to divide forms into multiple steps using the Step Break field, creating a smoother experience for users.

With multi-step forms, you can organize related fields into separate sections and guide users through the form one step at a time.

What Is a Step Break?

The Step Break field allows you to divide a single form into multiple steps. Each Step Break creates a new section in your form and helps users complete long forms more easily.

For example, you can organize a form like:

• Step 1: Personal Information
• Step 2: Contact Details
• Step 3: Additional Information

Each Step Break controls the title and navigation settings for its respective step.

How it works:

• Fields placed before a Step Break belong to the previous step.
• Fields placed after a Step Break appear in the next step.
• Each Step Break block lets you configure the step title.

Tip: Step Break is useful for long forms such as registration forms, booking forms, surveys, and application forms.

Supademo

Create a Multi-Step Form

Follow these steps to create a multi-step form in Gutena Forms.

1. Create or Open a Form

• From your WordPress dashboard, go to Gutena Forms → Forms.
• Create a new form or open an existing one.
• Go ahead and add any fields you’d like to include in your form.

2. Add the Step Break Field

When you have added enough fields for the first step and want to continue on another step, add a Step Break field. This will divide your form into multiple steps.

• Click the + icon inside the form container.
• Search for Step Break.
• Add the Step Break field where you want the next step to begin.
• Repeat the process to create additional steps.

Note: Fields placed before the first Step Break automatically appear in Step 1.

3. Configure Step Break Settings

After adding a Step Break field, you can customize the step labels, progress indicator, and navigation buttons.

Enable Step Labels

Displays step titles in the progress indicator.

Progress Indicator

Controls how users see their progress through the form.

Available options:

• Steps: Displays individual steps with their titles.

• Progress Bar: Displays a visual progress bar.

Step 1 Title

Sets the title displayed for the first step of your form.

Note: Step 2 and later step titles are configured from their respective Step Break blocks.

Next Button Label

Customizes the text displayed on the button used to move to the next step.

Back Button Label

Customizes the text displayed on the button used to return to the previous step.

4. Configure Additional Step Titles

Each Step Break field block controls the title of the step that comes after it.

To configure a step title:

1. Select the Step Break field block.
2. Then the Step Break field settings open on the right side panel.
3. Enter the title for that step.

For example:

• The first Step Break controls the title for Step 2.
• The second Step Break controls the title for Step 3.

Tip: To change the first step title, update the Step 1 Title setting from the Form block settings.

Troubleshooting

Step Break Settings Are Not Showing

Cause:

The Step Break settings panel appears only after a Step Break field has been added to the form.

Solution:

Add a Step Break field inside your form first, then open the Form settings panel.

Step 1 Title Is Not Changing

Cause:

Step Break blocks control titles for later steps, not the first step.

Solution:

Select the main Form block and update the Step 1 Title setting.

Users Can Move Forward Without Completing Required Fields

Cause:

The field may not be marked as required.

Solution:

Select the field and enable the Required option from the field settings.

Need Help?

If you have any questions or experience issues while creating a multi-step form, contact our support team with details about your form setup and the issue you are experiencing. We’ll be happy to assist you.