Heads Up: This is the documentation for Joomla 3

We recommend using the Documentation for Joomla 4!

It is more up-to-date and extensive. Most of it applies retrospectively to Joomla 3.

Joomla 5 Notice

We are pleased to announce that as of January 29, 2024, all of our Joomla extensions are compatible with Joomla 5.

For all who are still updateing from Joomla 3 to Joomla 4: Joomla 4 Migration instructions are available here:

There is now a separate Documentation for Visforms for Joomla 4 and for Visforms for Joomla 5!

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.

Field type Pagebreak

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".

Multi page form options

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

Example of a form grouping fields with accordion layout.

Back to list Find suitable subscription