The Accordion Layout
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.
Accordion groups are created when the form contains fields of the “New Page” type.
Note: Accordions are useful when you want to alternate between hiding and displaying large amounts of content.
You can add as many accordion groups as you like to any form. This is done simply by inserting a New Page field into the form. Position the field in the field order where the accordion group should begin.
The Label option of the New Page field is used as the heading of the accordion group.
By default, Visforms interprets a New Page field as a page break and creates a multi-page form.
In order for New Page fields to be rendered as accordion groups, the following option must be set in the form:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Form » Parameter: Display as = “Accordion”.
Note: The settings for multi-page forms are only used if you have created a multi-page form. A multi-page form is created if the form contains at least one field of the New Page type.
By default, the first panel of an accordion is displayed open.
The following option can be used to ensure that the first accordion panel remains closed when the page loads:
- Form Configuration » Tab: Advanced » Sub-Tab: Layout
Group: Multi-Page Form » Parameter: 1st Panel Closed = “Yes”.
Visforms adds this automatically
Visforms automatically inserts the code necessary to create a Bootstrap Accordion Element at the position where a New Page field is placed in the field order. All subsequent fields are then located in this accordion section.
An accordion section is automatically closed when another New Page field appears. After the next New Page field, the current accordion element is closed and a new one is started.
After the last form field, Visforms automatically closes the last accordion and displays all parent form information and controls below it. This includes things like a captcha, the Required Field text if it was placed in the form footer, buttons, and other elements.
If you have set the Summary Page option to Yes, Visforms adds a summary page to the form. In addition, Visforms automatically inserts a Check button below the last accordion, which leads to the summary page. Visforms offers you numerous options for customizing the summary page. This is done in the form configuration under the Advanced tab and is explained in the following section: The summary page.
An example form
An example of a form with an accordion layout can be found here: Accordion Layout.