Quite often we’re asked to take a form and make its sections show up in tabbed format – that is, allow the user to show or hide form sections by clicking tabs down the side or across the top of the page. It’s pretty easy to do with a bit of jQuery and CSS, but for some reason isn’t included in Formidable’s core functionality.

This is also a fairly frequent query even from other developers and designers, so I thought I’d take a few minutes to explain how I do it.

How to do it

This is an extremely simple operation, simply past the code at https://gist.github.com/DarrylErentzen/11058641 into your Form’s “Settings->Customize HTML->After Fields” section.

Presuming you have ordinary Formidable Pro section headings in your form, (no columns or accordions or anything fancy) they’ll become tabs. You can customize the CSS if desired.

How it works

We’ll ignore the CSS for now, and simply look at the jQuery:

[code language=”javascript”] <script>
jQuery(‘.frm-show-form’).prepend(‘&lt;div id=&quot;tab_headings&quot;&gt;&lt;/div&gt;’); // place this wherever you want your tabs to show up

jQuery(‘.frm_section_heading’).each(function(i, obj) { // for each section heading in form
heading = jQuery(this).find(‘.frm_pos_top’).text(); // grab the heading title
jQuery(‘#tab_headings’).append( ‘&lt;div class=&quot;tab_heading&quot; target=&quot;’+jQuery(this).attr(‘id’)+’&quot;&gt;’ + heading + ‘&lt;/div&gt;’); // create a tab for each heading and target the form section with it
if(i == 0) jQuery(‘#tab_headings’).find(‘[target=&quot;’+jQuery(this).attr(‘id’)+’&quot;]’).addClass(‘tab_heading_active’); // set the first tab to active
if(i != 0) jQuery(this).hide(); // hide the form section if it’s not the first section
});

jQuery(‘.tab_heading’).click(function() { // if a tab is clicked
jQuery(‘.frm_section_heading’).hide(); // hide all sections in form
jQuery(‘.tab_heading’).removeClass(‘tab_heading_active’); // remove active status from all tabs
jQuery(this).addClass(‘tab_heading_active’); // set the clicked tab to active
jQuery(‘#’+jQuery(this).attr(‘target’)).show(); // show the form section targeted by the tab
});
</script>[/code]

The first line simply creates a DIV for your tabs to go into and puts it at the top of your form.

The first code block loops through the Headings, creates an element in your “tab_headings” div for each, and hides everything except the first section of the form and the Submit button.

The second code block contains the functionality for the tabs we’ve just created. It fires when a tab is clicked. On click, it hides all sections, removes the “tab_heading_active” class from the previously active tab and assigns it to the clicked tab, then shows the target section of the form.

That’s it! There’s nothing to it. Here it is in action:

As you can see, the CSS in this demonstration is extremely generic. It should be easy to modify it yourself to make it look however you’d like.

You can also easily add transition effects such as fades, slides, drop shadows, button click effects, etc. using jQuery, but those are beyond the scope of this tutorial.

Enjoy!