What's the Container element for?

What the new (in CFv4 RC3.4) Container element appears to do is to provide a way of 'grouping' form elements into blocks.

This FAQ is a brief overview of Containers, I have since written a longer, more detailed FAQ here.

In a traditional form you might do this by putting a set of form elements inside a div, or better, a fieldset. The you use CSS to style the group by putting a border around them or setting a background colour. In ChronoForms is was possible to do this but only by using two separate Custom Code elements at the start and end of the element group which was a bit fiddly.

The ChronoForms Container element that Max added does this and more. Once you add a Container element you can drag other elements into it - in much the same way as you can drag actions into an event box. You can then configure the element to select the kind of group that you need.

Virtual

There's no output in the HTML so I think this is just a convenient way of grouping elements in the Preview box if you have a long form.

Div

Surrounds the group in <div>. . .</div> tags, the only option you have is to add a class to the div. There will also be a id applied that you can find and use if you need it. (Use the Custom option if you need more flexibility.

Fieldset

Surrounds the group in <fieldset>. . .</fieldset> tags, the only option you have is to add a class to the fieldset. There will also be a id applied that you can find and use if you need it. NB you can't add a legend with this option, you could use a Custom Code element, or the Custom option for the Container.

Tabs Area & Tab

Use the Tabs Area option to create a Tab set in your form, then use Container elements using the Tab option inside that to create individual tabs.

Panes Area & Pane

The same as the Tabs options but creates Panes (also called sliders or accordion tabs).

Custom

Add code that you need into the Start Code and End Code boxes. For example you could use this instead of the Fieldset option if you wanted to add a <legend> tag and some opening and closing text to the element group.