NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Docs » Multi-step Forms » Creating Multi-step Forms

Creating Multi-step Forms

This article will guide you through the process of creating a multi-step form in NEX-Forms. You’ll learn how to break down a form into manageable steps, helping to improve user experience by reducing the complexity of long forms. Step-by-step instructions will show you how to add new steps, customize navigation, and enhance form styling to create a streamlined, user-friendly multi-step form that encourages completion.

In this Article

Exercise 1: Creating a 3 step form
Exercise 2: Personalizing steps
Navigating the steps

Exercise 1: Creating a 3 step form

This exercise will give you step by step instruction to create a 3 step form like the one you see below. We will assume that you already read the docs on form creation and styling.

Personal Information

*First Name

*Last Name

Creating the first step

Create a new Blank Form.
CLICK the "Add New Step" button.
A new step have been added to your form. The step already includes the "NEXT" step button for your convenience.
Add fields to the step container, like example below:

Creating the second step

CLICK the "Add New Step" button same as with the first step
A second step have been added to your form. The step already includes the "NEXT" step and "PREVIOUS" step buttons for your convenience.
Add fields to the step container, like example below:

Creating the third and FINAL step in this exrcise

CLICK the "Add New Step" button same as with the first and second steps
A third step have been added to your form.
Add fields to the step container, like example below:
We know this is the last step in the form so we need to change the NEXT button to a SUBMIT button as there will not be a next step.

Edit the NEXT button and change the DEFAULT VALUE (button text) to for example "Submit".

Lastly, change the BUTTON TYPE to a Submit button.

Exercise 2: Personalizing steps

This exercise will give you step by step instruction to personolize steps with icons, headings and descriptions which will be reflected in the multi-step breadcrumb as per the actual form example below:

Personal Information

*First Name

*Last Name

Using Icons

Edit a multistep form. We will be using the multi-step form in Exersize 1 above for the purpose of this example.
Navigate to step 1.
Click on the Add Icon button or enter an icon class name.
Choose an Icon to represent the step.
The selected icon will be allocated to the step's breadcrumb.
Repeat the process for the other steps in your multi-step form.

Using Step Titles

Edit a multistep form. We will be using the multi-step form in Exersize 1 above for the purpose of this example.
Navigate to step 1.
Give your step a Title
The title will be allocated to the step's breadcrumb.
Repeat the process for the other steps in your multi-step form.

Using Step Descriptions

Edit a multistep form. We will be using the multi-step form in Exersize 1 above for the purpose of this example.
Navigate to step 1.
Give your step a Description
The title will be allocated to the step's breadcrumb.
Repeat the process for the other steps in your multi-step form.

Navigating the Steps

This section will demonstrate how to navigate trought the steps for editing.

Edit your multistep form.
CLICK on a step number from the multistep navigation to go directly to any step.

Alternatively use on the breadcrumb (when set to be included in the form)

Was this article helpful?

Yes

Still having trouble? How can we help you?

This article was last updated on 19 November 2024

Popular Articles

Stay in Touch

Get the latest NEX-Forms news and info by following us on:

In this article

NEX-Forms Documentation

YEAR END SPECIAL NOW ON!