Override Form Layout

Visforms uses the improved JLayout Concept of Joomla!. Therefore it is possible to adapt almost every piece of HTML code created with visforms individually. This was achieved by . Please note, that although this Joomla! feature is really cool, it requires advanced knowledge and skill to use it! Messed up override files will break Visforms and after each Visforms update you have to check, whether your override files have to be adapted, because the original layout file was modified by the update.

Layout files are located in the components/com_visforms/layouts folder

You will find the layout files, which create the HTML code for the form fields in a subfolder "layouts" in the components/com_visforms folder. You can create an override for each layout file in your template folder and adapt the HTML code to your individual requirements.

In order to achieve this you have to create a folder html in the root of your template folder (if the html folder does not already exist). Inside the html folder you have to create a folder named >code>layouts (if it does not already exist). Inside the layout folder create a folder named com_visforms and inside that com_visforms folder create the complete path to the file, which you want to override, as you find it in components/com_visforms/layouts

For example, if you want to create an override of the file

components\com_visforms\layouts\visforms\mcindividual\multicheckbox\control.php

the full path inside your template folder would be

html\layouts\com_visforms\visforms\mcindividual\multicheckbox\control.php

Which layout files are used depends on the field type and the choosen form layout

Please check the table below for detail information. For most field types two files are involved in the HTML code creation. There is a file label.php (which creates the field label) and a file control.php (which creates the control for example the HTML input tag, the HTML select tag,...). If the label.php is missing this field type either displays no label (as in fields of type field separator) or the label is part of the control (as in checkboxes in the bootstrap layouts). Further on there might be different implementation of the HTML code for different form layouts.

Different field types may use the same layout file

Some field types are very similar (considering their HTML code) like text, email, password, url and number or submit and reset buttons. Therefore some field types share the same layout files. How field types inherit from others is listed in the table below.

Some form layouts add custom HTML to the fields

Depending on the choosen form layout the HTML code for fields may differ significantly. Especially the bootstrap layouts wrap label and controls in additional HTML (for examples divs with class attributes "control-group"). This additional code is added by the files in the "decorators" folder. But in some field types (like checkboxes) the wrapping HTML and the control HTML is entangled so closely, that it is not possible to use a decorator. Therefore some field types are not decorable and the decorator file is not used.

How to read these information?

The first choice to look for the layout files of a field type which you want to override is to search in the folder of the choosen form layout (for example the folder components/com_visforms/layouts/vsforms/mcindividual, if you display your form with the multi column form layout). If this folder does not exist you have to look, whether the field type inherits from another field type. If so, the next place to look for the layout files is the folder of this field type. Only if this folder does not exist, too, you have to find out, if the selected form layout inherits from another form layout. If so, the next place to look for the layout files is the folder of this form layout. First look if there is a folder for the field type you want to override, if not search for a basic field type... and so on until you may find the requested layout files in the components/com_visforms/layouts/vsforms/default folder in one of the basic field types.

Example: Where are the layout file for a checkbox group field in the bootstrap horizontal layout?

Does the folder components/com_visforms/layouts/vsforms/bthorizontal/multicheckbox exist? No
Is there a field type from which the checkbox group inherits? Yes, the radio button
Does the folder components/com_visforms/layouts/vsforms/bthorizontal/radio exist? No
Is there a form layout from which the bootstrap horizontal layout inherits? Yes, the default bootstrap layout
Does the folder components/com_visforms/layouts/vsforms/btdefault/multicheckbox exist? Yes
So this is where you will find the layout files to use in an override.

You make layout overrides "at your own risk"

In order to provide you with a flexible and very feature rich form component Visforms comes with individual HTML code and relies on a specific code structure and specific attributs. Conditional fields, as one example, rely on specific class and style attributes in the code. Please note that unprofessional layout overrides can break Visforms so that it will not work as expected any longer. We wanted to provide people who have the necessary knowledge in HTML, CSS, Javascript, PHP and Joomla! with the means to create override but we emphasize, that all overrides are created at your own risk and we cannot give free support for neither creating overrides nor solving problems that result from unprofessional overrides.

Article list