Form and Details templates

  • Views Views: 80,868
  • Last updated Last updated:

Navigation

         Form Article Plugin Tutorial
      Autofill form plugin
      Clone form plugin
      Comment form plugin
      Email form plugin
      EXIF form plugin
      FTP form plugin
      J2store form plugin
      Kunena form plugin
      Limit form plugin
      Log Form Plugin
      Logs form plugin
      Mailchimp form plugin
      Paginate form plugin
      Paypal form plugin
      PHP form plugin
      Pingdotfm form plugin
      Receipt form plugin
      Redirect form plugin
      REST form plugin
      Slack form plugin (+)
      SMS form plugin
      Twitter form plugin
      Upsert form plugin
      VBforum form plugin
      Create a Search Form
      Accordion Form Groups
  • 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 file​
    If 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.php
    to:
    components/com_fabrik/views/form/tmpl/Bootstrap/custom_css.php

    Replace 'Bootstrap' with whatever template you are using.

    Template Overrides​
    If 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
    1. Copy components/com_fabrik/views/form/tmpl/Bootstrap/default.php to templates/protostar/html/com_fabrik/form/Bootstrap/default.php
    2. 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
    All files in the form template folder can be overridden in this manner.

    Creating a New template​
    If 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 Elements
    old 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:

    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.

Back
Top