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: