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.
Visforms adds this automatically
Visforms automatically displays a Back button starting on the second page. If you set the Summary Page parameter to Yes, Visforms adds a summary page to the form. Visforms then automatically displays a Check button on the last form page with fields, which leads to the summary page. Visforms offers you numerous options for configuring the summary page and the new buttons:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms Group: Progress Indicator
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).
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
The alignment of the buttons can be configured for the form display.
The default setting is Mixed alignment with arrows without text:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Forms » Parameter: Button Alignment = “Mixed alignment with arrows without text”.
All other alignments except the default alignment Mixed alignment with arrows without text display the button text and behave as follows:
- Left: All buttons with button text and aligned to the left.
- Right: All buttons with button text and aligned to the right.
- Centered: All buttons with button text are centered.
An Example Form
An example of a multi-page form can be found here: Multi-page form.