Configure multipage form widgets

The page break widget is what makes a form a multipage form. Page breaks work as separators and divide the form to different pages. They enable users to navigate between the pages of the form. 

At the end of each page, the page break automatically includes a Next button and a Submit button on the last page. You can also enable the Previous step option, so that users can navigate between form pages.By default, this option is not enabled.

When you place the page break on the form body, the form automatically displays two new layout placeholders – header and footer. Reversely, when you remove the last page break element, the header and footer placeholders are removed from the form as well.

Page break settings

• Next step button
  You can edit the name of the button that enables users to go to the next form page.
• Allow users to step backward 
  This option enables users to go to the previous page of the form. By default, this option is disabled.
• Previous step button
  You can edit the name of the button that enables users to go to the previous form page. If you did not enable the Allow users to step backward option, this button is hidden.
• Template
  You can switch between the different form layout templates.
• Style
• CSS class
  You can enter the CSS class to use for additional styling.

Form navigation

NOTE: Users cannot use page titles to navigate between form pages.

When you place the form navigation widget in the form body, the widget automatically places a default title for every form page. When you add more page breaks to the form, a new page is automatically added to the form and it is displayed in the navigation. 

Form navigation settings

In the designer of the Form navigation widget, you can modify the following:

• Page titles
  You can edit the default value - the title of every form page.
• Template
  You can switch between the default template, displaying page titles, and the progress bar template, displaying the completion progress of the form in percentage.
• Style
• CSS class
  You can enter the CSS class to use for additional styling.