Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

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:

Back To Top

Next: Configure multipage form widgets