Topics

All topics

Configure multipage forms

Page breaks

You can make any form a multipage form by adding a Page break widget in the form editor. With the page break, you separate the form logically into different parts (pages). You can check how your form looks like in Preview mode. 

Header and footer

 When working with multipage forms, the form automatically displays two new layout placeholders: Common header and Common footer above and below the main placeholder, respectively. These placeholders set common header and footer to all pages of the multipage form.

For example, a common practice is to place a Form navigation widget in the Common header or the Common footer sections, so that the users can track the form completion.

NOTE: If you decide to switch to a single page form, you can remove all Page break widgets. As a result, the Common header and the Common footer placeholders are removed and all widgets placed in them are automatically moved to the main form content placeholder.

Form validation

 Validation of multipage forms is client-side. When users navigate forward from one page to the next, the current page is validated. Users cannot proceed to the next step, if the current step is not valid. For example, if there is a field, that is required and the user did not enter anything in the field, form validation mechanism does not allow the user to proceed to the next step.

Complex multipage forms

 You can also use multipage forms in more complex scenarios. For example, you can work with a multipage form with more than one Submit buttons and with multiple required fields. You can add a button that enables submition of the form when the user fills out just the required fields, without filling in the optional fields in the same step or in other steps.  

For example, you have a multipage form with three pages. The most important information is on the first page. Therefore, you can enable a Submit button on the first page. This way, you make sure that, even if the user does not fill out the rest of the pages, you will get the information that you need from the required fields on page one.

NOTE: You cannot have required fields in a step after the first Submit button, but you can add as many Submit buttons as you need.

Client-side events of multipage forms

 When a user navigates from one form page to the next, a form-page-changed event is fired for the form DOM element.
The event has the following parameters:
  • Index – the index of the current form page
  • previousIndex – the index of the previous form page 

To subscribe to the form-page-changed event, use the following code:

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Configure multipage form widgets