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 you add “New Page” type fields to the form
You can add as many accordion groups as you like to any form. This is done simply by inserting a “New Page” type field in the form. Position the field in the order of the fields where you want the accordion group to begin. The Label option of the New Page field is used as the accordion group heading.
By default, Visforms interprets a “New Page” type field as a page break and creates a multi-page form. In order for the “New Page” fields to be rendered as accordion groups, you must also change the “Display as” option in the form to “Accordion”. This is done in the form configuration under the “Advanced” tab. See also the figure below.
By default, the 1st panel of an accordion is shown open. With the option “1st panel closed” you can also set the accordion so that the 1st accordion panel remains closed when the page is loaded.
This adds Visforms automatically
Wherever a “New Page” field is placed in the field order, Visforms automatically inserts the code needed to create a Bootstrap Accordion Element. All following fields are then in this accordion section.
An accordion section will automatically close when another “New Page” box comes up. After the following additional field “New page” the current accordion element is ended and a new accordion element is started.
After the last form field, Visforms automatically closes the last accordion and displays all parent form information and controls below. This includes things like a captcha, the text “mandatory field” if placed in the form footer, buttons and others.
If you have set the “Summary Page” option to “yes”, Visforms adds a summary page to the form. In addition, Visforms then automatically inserts a “Check button” below the last accordion, which leads to the summary page. Visforms offers you numerous options for individually configuring 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 accordion layout can be found here: Accordion Layout.