Written
Long forms can be difficult for the user to work though and can look very complicated on the page. It can be very useful to break them up into smaller pieces. This tutorial is about splitting the form across several tabs. (There is another tutorial about building a multi-page form.)
In this tutorial we will build a very simple tabbed form. If you are new to this idea, or new to ChronoForms I suggest that you build a simple form like this first to see how it works before building the full form which may have many more elements.
There's a demo form {rokbox text=|here| size=|600,600| }http://greyhead.org/index.php?option=com_chronoforms&tmpl=component&chronoform=demo_form_tabs{/rokbox}.
Use the ChronoForms Form Wizard to create a new form. Drag these three elements from the Advanced Elements group into the Preview window:
- a Custom Element element
- a Container element
- a second Custom Element element
Open the first Custom element, check the Pure Code box and add this code:
<h2>Tabbed form demo</h2> <div id='cf_tabbed_form' style='width:400px;' >
This will add a header to the form and set its width - you may not need that part.
Open the second Custom element and add this code:
</div> <div class='cf_clear' ></div>
This closes the div we opened earlier and adds the 'clear' div to resolve a possible bug with the strap-line placement.
Lastly open the Container element and set the Continer Type to 'Tabs Area' (you might also want to change the Area Label to something more useful). Save the action settings.
Now we want to drag three more Container elements over and drop them inside the inside the existing Container element so that we have:
Custom Element
Container
+ Container
+ Container
+ Container
Custom Element
Container
+ Container
+ Container
+ Container
Custom Element
If something goes wrong and you drop one container in the wrong place you can delete it and try again.
Open each of these Container elements, set the Container Type to 'Tab' and name them 'Tab one', 'Tab two' and 'Tab three'.
Next we will drag some normal form elements from the Basic Elements group inside these Tab Containers. I put a Text element in the first Container, a Checkbox in the second and a DropDown plus a Submit Button in the third.
The result is an action group like this:
Custom Element
Container
+ Container
+ Text input
+ Container
+ Checkbox
+ Container
+ Dropdown
+ Submit Button
Custom Element
Container
+ Container
+ Text input
+ Container
+ Checkbox
+ Container
+ Dropdown
+ Submit Button
Custom Element
Open the new elements and check the 'required' validation boxes - and make any other changes that you like. (I used three different elements just to make it clear which tab is open.)
Click the Events tab, drag in a Load CSS action and a Show HTML action.
Open the Load CSS action and add this CSS:
div#cf_tabbed_form dl.tabs {
margin: 0px;
}
This is needed to handle a CSS conflict with the Joomla! Beez template which puts a 50 px space above the tabs - you may not need it but you can add any other styling you need here. Save the action.
Click the Form Settings tab, give your form a name, then click the 'Save' icon in the toolbar.
Click the 'Test Form' icon to view the form.
You should see three tabs and be able to move between them by clicking the tab headers.
If you click submit then the validation shoule work correctly and switch tabs if the first error is on an earlier tab.
The tab layout in this example is from CSS included in the template, if your template does not include this CSS please see this FAQ for an example that you can use or adapt.
Using accordion panels
Instead of using tabs you can configure your form to open the panels vertically using accordion sliders. This can be very effective and easier to navigate than the tabbed interface.
There's a demo form {rokbox text=|here| size=|600,600| }http://greyhead.org/index.php?option=com_chronoforms&tmpl=component&chronoform=demo_form_sliders{/rokbox}.
Follow the example above but set the main Container Type to 'Slider Area' and set the three inner Containers to Container Type 'Slider' and change the container names if necessary.
That's all.
Adding tab navigation
Whilst it is simple enough to see the tabs and use them to navigate in this simple form sometime it is useful to be able to add navigation buttons at the bottom of a tab.
Note: this will not work with the Slider version of the form but typically isn't needed with that layout either.
Caution: this requires a core hack in Joomla! 2.5 though there is a request for the feature to be added in a future version. It may not work in other Joomla! versions.
Open the file media/system/js/tabs.js and add the line shown here to the initialise section (I put it at line 66):
description.inject(this.content);
}
//Hack : store the class in the Element Storage to retrieve it later (ex form navigation Next button)
this.dlist.store('JTabs', this); // <-- add this line
this.display(this.options.display);
Save the tabs.js file and make a note to check this code afer upgrading Joomla!
In the form drag a new Custom Element element into each of the three tab containers. Open the elements and add this code:
<div class='to_tabs' >Go to: <input type='button' name='0' disabled='disabled' value='Tab 1' class='to_tab' /> <input type='button' name='1' value='Tab 2' class='to_tab'/> <input type='button' name='2' value='Tab 3' class='to_tab' /></div>
Change the disabled='disabled' attribute so that it applies to the current tab. Change the value attributes to match the names of your tabs but leave the names as they are - they represent the tabs, starting with 0 for the first.
On the Events tab drag a Load JS action into the On Load event and move it up before the Show HTML action. Open the action and add this code:
window.addEvent('domready', function() {
$$('div.to_tabs input').each(function(el) {
el.addEvent('click', goTab);
});
});
function goTab(){
pane = $$('#cf_tabbed_form dl')[0].retrieve('JTabs');
pane.display(this.getProperty('name'));
}
Note: this uses the id of the <div> we added in the first Custom Element element to identify the tabset. If you skipped that step, or used a different ID you will need to fix the bugs.
