-
Fabrik Base 4.5 is now available.
See Announcements
Form and Details templates
- Views Views: 80,866
- Last updated Last updated:
-
Sub-pages:
Contents
Template locations
Form templates can be found in components/com_fabrik/views/form/tmpl/
List templates can be found in components/com_fabrik/views/list/tmpl/
Fabrik 3.0 and earlier uses the same templates for both Forms and details.
Fabrik 3.1 uses specific details template which are very similar to form templates, but are located in:
components/com_fabrik/views/details/tmpl
Each template has its own folder.
Template structure
This section needs writing to explain what files make up a template and what each one of them does.
Changing a Fabrik template
If you want to make changes to the style of your Fabrik Lists or Forms you have a number of Options depending upon the degree of changes you want to make:
- Use the Custom CSS file (recommended)
- Use a Joomla template override
- Clone a standard template and replace the existing CSS file
The Custom CSS fileIf you just need to make a few simple tweaks or additions to how an existing template looks, you can use a custom CSS file, which is included after (rather than used instead of) the standard CSS for the template.
This is recommended because this way you will automatically use the template version matching the running Fabrik version.
If you are using Joomla template override or a custom template it may be necessary to adapt them if Fabrik's template structure is changing.
In Fabrik 2.x, if a "custom.css" file was provided in the template directory, this was included. In Fabrik 3.x we now use a "custom_css.php" file to achieve the same goal but with greater capabilities, though for backward compatibility with Fabrik 2.x, a "custom.css" file will still be included if it exists.
An example custom CSS file ("custom_css_example.php") is provided in each of the standard List/Form/Details templates which you can use as a starting point for your own "custom_css.php" file. Read the comments in this file for details of how to use it.
Your custom_css.php will not be affected by updating Fabrik (either by ZIP or github), as we never include these files in the Git repo.
Create your custom_css.php in standard Fabrik view folder. We provide an example of this file, which you can copy from e.g.
components/com_fabrik/views/form/tmpl/Bootstrap/custom_css_example.phpto:
components/com_fabrik/views/form/tmpl/Bootstrap/custom_css.php
Replace 'Bootstrap' with whatever template you are using.
Template OverridesIf you need to make major changes to a Fabrik template, you can use Joomla's standard override functionality.
This involves copying the files you want to change over to your Joomla template folders, and editing these with your changes. This means that you are completely replacing our default files with your own - you will no longer automatically inherit changes we may make in our templates, and may need to manually copy and paste these into your override files when you upgrade Fabrik to a new version.
As an example, suppose that you are using the Joomla template Protostar and you want to slightly alter Fabrik's 'Bootstrap' form template's markup
- Copy components/com_fabrik/views/form/tmpl/Bootstrap/default.php to templates/protostar/html/com_fabrik/form/Bootstrap/default.php
- Make a change to the copied file, save it and view your form. It will now be using the markup from the default.php in the template override folder
Creating a New templateIf your changes are going to be extensive, we suggest that you create an entirely new template by copying an existing template folder and altering it to suit your needs.
Copy:
components/com_fabrik/views/form/tmpl/Bootstrap/to:
components/com_fabrik/views/form/tmpl/mytemplate/
If you selected a template from within the menu item that links to the form, then you will need to edit the menu item and select 'mytemplate' from the template dropdown.
Otherwise you can simply edit your form and select 'mytemplate' as the template you wish to use.
Creating a template with single Elementsold Fabrik3.0:Use a copy of the "contacts_custom" template to display single Elements in positions and styles as you need.
Fabrik 3.1+:
Please note that element's should always be wrapped inside this html:
PHP:
<div class="control-group <?php echo $element->containerClass; ?>" >
......
</div>
Example details/PDF template:
Elements in this example are called by name, so it's only to be used by a form containing this Elements.
Adapt element and group names, CSS classes etc.
Copy the folder
components/com_fabrik/views/details/tmpl/Bootstrap
to
components/com_fabrik/views/details/tmpl/bootstrap_my_custom_details
Edit default.php, replace "foreach ... endforeach;" (lines 41 to 74 at times or writing) with
Code:/*Display Elements directly by group + element name; only element labels and content, no group settings used;*/
$element = $this->Groups['Contact Details']->Elements['last_name'];
?>
<div class="control-group <?php echo $element->containerClass ; ?>">
<div class="fabrikLabel myLabel">
<?php echo $element->label_raw;?>
</div>
<div class="fabrikElement myElement">
<?php echo $element->element;?>
</div>
</div>
<?php
$element = $this->Groups['Contact Details']->Elements['email'];
?>
<div class="control-group <?php echo $element->containerClass ; ?>">
<div class="fabrikLabel myLabel">
<?php echo $element->label_raw;?>
</div>
<div class="fabrikElement myElement">
<?php echo $element->element;?>
</div>
</div>
<?php
$element = $this->Groups['Your Enquiry']->Elements['message'];
?>
<div class="control-group <?php echo $element->containerClass ; ?>">
<div class="fabrikLabel myLabel">
<?php echo $element->label_raw;?>
</div>
<div class="fabrikElement myElement">
<?php echo $element->element;?>
</div>
</div>Commented Default Form Template (Fabrik3.0 only)
Fabrik3.0 only:
The 'default' form template now includes comments that describe what each section of code does (in default.php) and how it is styled (in template_css.php)
There is also a 'contacts_custom' form template, designed to work with the sample Contacts form, which shows some of the techniques you can use to build a totally custom template
Below are several links to resources referenced in these files that describe form and other html and css Elements used in the form template:
- https://www.w3schools.com/tags/tag_legend.asp
- https://www.w3schools.com/tags/tag_span.asp
- https://www.w3schools.com/tags/tag_ul.asp
- https://www.w3schools.com/html/html_forms.asp
CSS Styling Examples
Some CSS examples for Fabrik3.3+
Some examples of CSS styling for Fabrik3.0
Javascript Interactivity
Some examples of Javascript Interactivity can be found here.
Other template examples
Other examples of template changes can be found here.