Configure multipage form widgets

ASP.NET CoreNext.js

Form page

You use the Form page widget to design the layout and workflow of a multipage form. You insert as many Form page widgets as needed in the form body and that serves to split the form into multiple subsequent pages (steps).

The Form page widget also enables users to navigate back and forth within the configured pages so they can modify their responses before submitting the form.

Form page settings

In the designer of the Form page widget, you can configure the following options.

In the Labels and content section:

• Page labelThe predefined page lable is Step. You can edit this value - for example, enter Personal data. In the next form page, enter Education, and so on.
• Button label
  You can edit the label of the predefined Next button that navigates users to the next page. For example, enter Continue.
  When adding the last Form page, you configure a Submit or Send label for this button.
• Allow users to step backward
  This option enables users to go back to the previous page/step of the form. By default, this option is enabled (Yes).
• Back link label
  You can edit the label of the predefined Back link that navigates users to the previous page/step. If you have disabled the Allow users to step backward option, this setting is not visible.

In the Display settings section:

• TemplateYou can choose between the default template or any relevant personalized templates.
• CSS classYou can define an individual (custom) CSS class for the widget.

Save your changes.

Form navigation

You use the Form navigation widget in multipage forms to display a navigation bar with the page sequence based on the number of pages you've configured. In addition, when users navigate between the pages, this widget indicates the currently active page (step) and shows previous step(s) as completed.

When you place the Form navigation widget in the form body, it automatically inserts a new navigation step for every configured Form page. For best user experience, in the Form structure pane, the Form navigation widget should be placed on top of the Form pages.

Form navigation settings

In the designer of the Form navigation widget, you can configure the following options.

In the Labels and content section:

• Navigation steps
  You can edit the predefined values by entering a desired label for each step, which will be displayed next to the respective number of the steps sequence. For example, enter Personal data, Education, Work experience and so on.

In the Display settings section:

• TemplateYou can choose between the default template, displaying the pages as sequential steps, or  other applicable template.
• CSS classYou can define an individual (custom) CSS class for the widget.

Save your changes.