The Multi-Page Form
Note: These features are part of the Visforms Subscription and are not included in the free Visforms version.
For a better understanding, we recommend reading the documentation completely and using the
Section Introduction
to start.
Relationships explained in earlier sections of the documentation are not repeated here.
Multi-page forms use “New Page” fields
You can add any number of pages to any form. This is done simply by inserting a New Page field into the form. Position the field in the field order at the location where you want the page break to be inserted. The Label option of the New Page field is used as the text for the button that leads to the next page. Just like you know from the Submit button and Reset button.
Options for Multi-Page Forms
You can choose between the following two display formats for multiple pages:
- Multiple Pages (default value),
- Accordion.
To display a multi-page form, the Display as parameter must be set to Multiple Pages, which is also the default value:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms » Parameter Display as = ‘Multiple Pages’
You can specify your own text for the back buttons. If you leave this option blank, the default text Back will be used.
Use the CSS Class for Back Button option if custom styling of the back buttons is required.
You can specify whether the user’s progress is displayed. If you display your form in a module in a small space, for example, you can minimize the text in the progress bar to save space (see below).
Visforms adds this automatically
Visforms automatically displays a Back button starting on the second page. If you have set the Summary Page parameter to Yes, Visforms adds a summary page to the form. Visforms then automatically displays a Review button on the last form page with fields, which leads to the summary page. Visforms offers numerous ways to configure the summary page and, in particular, the buttons involved in the following areas:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms
Group: Progress Indicator
The buttons of the multi-page form
The following buttons are part of the multi-page form:
- Next button:
It navigates forward to the next page.
It is created by inserting the New Page field type into the form.
The button text corresponds to the form field label:- Field Configuration
Parameter: Label = ‘My Next’.
- Field Configuration
- Back button:
It navigates back to the previous page.
It is created by inserting the New Page field type into the form.
The button text corresponds to the following setting in the form:- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms » Parameter: Back Button Text = ‘My Back’.
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
- Review button:
This navigates you to the summary page with a table overview of all entries for easier review.
It is automatically inserted if the Summary Page option is enabled.
The button text corresponds to the following setting in the form:- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Summary Page » Parameter: Review Button Text = ‘My Review’.
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
- Change button:
This navigates you back from the summary page to the last input page with form fields.
It is automatically inserted if the Summary Page option is enabled.
The button text corresponds to the following setting in the form:- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Summary Page » Parameter: Change Button Text = ‘My Change’.
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
- Submit, Image Submit, and Reset Buttons
These buttons submit or reset the form data.
They are created by inserting one of the field types Submit-Button, Image Submit-Button, or Reset-Button into the form.- For the Submit and Reset buttons, the button text corresponds to the form field label:
- Field configuration
Parameter: Label = ‘My Submit’.
Parameter: Label = ‘My Reset’.
- Field configuration
- The Image Submit-Button is a form field of the same type and does not display button text, but rather the image stored for it in the field configuration:
- Field Configuration » Tab: Basic Settings
Group: Image Submit-Button Settings » Parameter: Select Image = ‘My Image File Path’.
- Field Configuration » Tab: Basic Settings
- For the Submit and Reset buttons, the button text corresponds to the form field label:
Focusing the form after switching to a new page
You can specify whether and how the form is focused after switching to a new page.
This applies to both forward and backward switching.
Do not focus page
After switching to a new page, the form does not scroll. If the individual pages of the form are very different in length, the user may only see a white area of the page. If the individual pages of the form are approximately the same length, the bottom edge of the form is always clearly visible in the viewport.
Focus on top of page
After switching to a new page, the page scrolls up far enough so that the first form field on the page is clearly visible. The first form field on the page is then at the top of the viewport.
Focus on bottom of page
After switching to a new page, the page scrolls down far enough so that the bottommost form field on the page is clearly visible. The bottom-most form field on the page is then located approximately in the middle of the viewport.
Space-saving progress display
An activated progress display can lead to unwanted page breaks in small display sizes:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Progress Display » Parameter: Show progress = “Yes”.
Group: Progress Display » Parameter: Space-saving progress = “No”.
An activated progress indicator can be minimized to a minimal display of the individual steps:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Progress Indicator » Parameter: Show progress = “Yes”.
Group: Progress Indicator » Parameter: Progress save space = “Yes”.
Configurable Button Alignment
Uniform Alignment
Configurable button alignment is available when Bootstrap 5 is selected as the UI Framework and the form is displayed as a multi-page form:
- Form Configuration » Tab: Advanced » Sub-Tab Layout
Group: Basic Settings » Parameter: UI Framework = “Bootstrap 5”.
Group: Multi-Page Form » Parameter: Display As = “Multiple Pages”.
For the UI Framework Bootstrap 5, it is thus possible to specify a uniform alignment for all buttons in the form:
- All buttons aligned to the right.
- All aligned to the left.
- All centered.
The button alignment for the form display can be configured as follows.
The default setting without an explicit selection is Mixed Alignment with Arrows without Text:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms » Parameter: Button Alignment = “Left” or “Right” or “Centered”.
For the following settings, all buttons display the button text and behave as follows:
- Left: Buttons with button text and aligned to the left.
- Right: Buttons with button text and aligned to the right.
- Centered: Buttons with button text and centered alignment.
Left Alignment
Right Alignment
Centered Alignment
Mixed Alignment
The default setting for button alignment is Mixed Alignment with arrows without text:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms » Parameters: Button Alignment = “Mixed alignment with arrows without text”.
With Mixed alignment with arrows without text, the alignment is done as follows:
- Forward, Back, Review, and Change buttons appear on the far right and left sides of the form, respectively.
- The group of Submit, Image-Submit, and Reset buttons appears centered in the middle of the form.
An example form
An example of a multi-page form can be found here: Multi-page form.