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
the full path inside your template folder would be
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.
|Form Layout||Inherits from||Foldername respectively Filename|
|Horizontal Bootstrap Layout||Default Bootstrap Layout||bthorizontal|
|Multi Column Layout||Default Bootstrap Layout||mcindividual|
|Default Bootstrap Layout||Default Layout||btdefault|
|Fieldtype||Inherits from||Decorable||Folder Name|
|Image Submit Button||Submit||no||image|
|Checkbox Group||Radio Button||yes||multicheckbox|
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"