The Accordion Layout
This feature is part of the Visforms Subscription and not available in the free Visforms version..
We propose reading the documentation from the beginning, starting with the Introduction. We will not repeat concepts and explanations made in previous parts of the documentation, here.
You can create a accordion groups when you add a field of type "pagebreak" to your form
Since Visforms 3.9.0 in combination with the Visforms Subscription 2.0.0 or higher, you can use the field type "Pagebreak" in order to create accordion groups.
You can add as many accordion groups to your form as you like.Just add a field of type "pagebreak" for each new page to the form. Each field of type pagebreak starst a new accordion group. So the first pagebreak field of your form will open the first accordion group. Move the pagebreak field up or down in the field order, to get it inot the right position.. The field "label" is used as Heading for the accordion group.
As default a field of type "pagebreak" is considered to create a new page and a multi page form. In order to use a field of type "pagebreak" to create accordion groups, you have to set the option "Display as" in the form configuration to "Accordion" (see screenshot below). This option in set in the form configuration, tab "Advanced".
When the page is loaded, the first accordion panel is expanded by default. Please use the Optioin "1. Panel collapsed" if you want to load your form with the first accordion panel collapsed.
This is what Visforms will do for you be automatic action
Visforms will add the html code, required to open a bootstrap accordion before the first field of type "pagebreak". Each field, that follows in the field order, will be put into the accordion panel. The next field of type "pagebreak" will close the previous accordion panel and open an new one. After the last form field the accordion is closed properly and form information and controls (like Captcha, required text, button...) are added at the bottom of the form, outside the accordion.
If you have selected to add a summary page to your form, Visforms will automatically add a "summary" button, that leads to the summary page as well as a "correct" button and the summary page itself. How to set up the summary page properly, is covered by the article The Summary Page