FAQs

What are containers and how can I use them?

Written

It you've used ChronoForms for a little while you may have noticed that in the Advanced elements group there is a ‘Container’ element that seems a little bit different. It a very useful element when you build large or complex forms and this FAQ is an introduction to using it.

The key feature of the Container element is that - as the name says - it can ‘contain’ other elements (including other containers). So you can think of it as a way of grouping form element together for one reason or another.

When you configure a Container element there is a Container Type drop-down with these entries in it: Virtual (none); Div; Field Set; Tabs Area & Tab; Sliders Area & Slider; and Custom. We'll look at each of these in turn.

If you just want a quick description of Containers, please see this FAQ, if you want more detail read on here.

A Virtual Container

A Virtual Container adds nothing at all to your Form HTML so it has no effect on how your form is displayed; what it does do is to allow you to build groups of form elements in the Preview box. If you close the Container Element and look at it in the Preview box you will see that there is a ‘Collapse’ link at the top of it. When you click this, the container collapses hiding any elements in it and showing an ‘Expand’ link to open it up again. 

If you have a long form then grouping elements in Virtual containers lets you access the element groups one at a time without having to go scrolling through tens of elements down the page to find the one that you need. 

Add Area Labels to each container so that you can see which group of form elements are in it.

Note: all the other Container types still work just like this and will let you group elements in the Preview box . . . and do somehing in the Form HTML as well. 

A Div Container

This is the next Simplest Container type. It just adds <div></div> tags around the group of elements inside the Container. Actually it does a little more than this. The tags added are like this:
<div class="cf_container ccms_form_element my_container" id="cf_container_1">
  <!-- element HTML is here -->
</div>
The class 'my_container' here is added from the Container Class box in the Container configuration; the id is automatically added by ChronoForms, the number 1 is the element number that is visible before you add a Area Label to the Container. If you need it later you can get it from the Form HTML on the Form Code tab.
You can use the Container Class to style the div - though the Fieldset Container type may be more useful for that. 
The div container is probably most useful to hide or display whole groups of elements at once using JavaScript linked to the Container ID.

A Fieldset Container

This is similar to the Div Container but adds <fieldset> and <legend> tags which are very helpful in providing visual structure to groups of elements in the Form HTML. The code added is like this:
<fieldset class="cf_container ccms_form_element my_container" id="cf_container_1">
  <legend>Area Label</legend>
  <!-- element HTML is here -->
</fieldset>
Note that in this case the Area Label from the Container configuration is used as the Fieldset Legend. The Container Class and ID are added as before.

Tabs Area and Tab Containers 

These two kinds of containers are used together - a Tabs Area Container with two or more Tabs Containers inside it to create the effect of a multi-tab form where the groups of elements on each tab are shown then the tab header is clicked. This is similar to the layout used in the ChronoForms Wizards.
Here is what the resuting form looks like in a Joomla! 3 site using the Protostar template.

Note: not all templates provide the CSS necessary to support tab sets so you may need to add your own styling.

Sliders Area and Slider Container

These are very similar to the Tabs but they produce horizontal accordion sliders instead of tabs. These can be really useful in making a long form visible in sections.

This example has some added CSS to show up the slider bars more clearly.

Note: in the CFv4 stable release (the current release as I write this) there is a bug and sliders show as tabs. The fix is to open the file /administrator/components/com_chronoforms/helpers/html_helper.php and look for lines 634-644 where there are three references to JHtmlTabs:: which need to be replaced by JHtmlSliders::

Custom Container

This last Container type is the most versatile. It has two code boxes 'Start Code' and 'End Code' and you can pust any HTML and/or PHP that you need into each of them.

Note: you can add code in these boxes with other container types but it will be ignored unless the Container Type is set to Custom.

The simplest use would be to add <div class='aaa' > into the Start Code box and </div> into the End Code box (this is effectively what the 'Div' Container Type does). You must remember that any tags that are opened in the Start Code box must be closed in the End Code box or you may break your page HTML.   
Here are a couple of examples of simple ways to use these containers to hide blocks of code.

Hiding the block conditionally

If we have a form variable from a previous page or a calling URL we can use this to hide a set of inputs. Here are two ways to do this; the first one leaves the block in the page - but sets the display to None so that it is hidden, the second removes the block from the page display.
1) The Start Code to hide the block is:
<?php
$display = 'none';
if ( $form->data['some_variable'] == 'some value' ) {
  $display = 'block';
}
echo "<fieldset style='display:{$display};' >
  <legend>Some Title</legend> ";
?>
and the End Code:
</fieldset>
2) The Start Code to remove the block is:
<?php
if ( $form->data['some_variable'] == 'some value' ) {
?>
and the End Code:
<?php
}
?>
In each case you would need to edit the highlighted values to match your form values.
Note: that both of these approaches need careful planning and, if some of the inputs need to be validated, then in Case 1 you may need to add JavaScript to manage the validation classes.