make a formidable form show tabs for each section

gistfile1.txt

<!-- place styles and jQuery somewhere in the page containing the form, or in the form's "Customize HTML" after the submit button -->
<style>
/***
 * styles for tabs
***/
.tab_heading { 
  background-color: #ddd;
  color: #aaa;
  font-size: 13px;
  display: inline-block;
  font-weight: bold;
  margin-right:5px;
  padding:5px;
  border: 1px solid #ddd;
}
.tab_heading_active, .tab_heading:hover { 
  background: #aaa;
  color: #fff;
  font-size: 13px;
  display: inline-block;
  margin-right:5px;
  padding:5px;
  border:1px solid #aaa;
}
/***
 * END styles for tabs
***/

/***
 * styles for form contents
***/
.frm_section_heading { /* wraps around each section 
  width: 100%;
  border: 1px solid #aaa;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  margin-top: 0px;
  overflow: hidden;
  padding-left:5px;
  padding-right:5px;
}
.frm_pos_top { /* The heading part */
}
/***
 * END styles for form contents
***/

</style>
<script>
jQuery('.frm-show-form').prepend('<div id="tab_headings"></div>'); // 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( '<div class="tab_heading" target="'+jQuery(this).attr('id')+'">' + heading + '</div>'); // create a tab for each heading and target the form section with it
 if(i == 0) jQuery('#tab_headings').find('[target="'+jQuery(this).attr('id')+'"]').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>

Made it generic so it can be used with any form with a quick cut-and-paste.

I see this comment:

But in the Customize HTML section, there is no box to enter after the Submit Button box.

Am I misunderstanding?

I put the code in the "After Fields" box. Seems to work except if I enter data to fields under the tabs and then hit "Submit", it looks like it's being saved, but there is no confirmation message and nothing is saved.

I tried hitting "Submit" for each tab, but of course there are required fields under each section so the "Submit fails".

Your thoughts please.

works great. Only thing that I found... When I put in a condition for the section show/hide.
Example for section hide if never married. Spouse section/tab still shows.

Useful snippet! Anyone know if there is a way to place the tabs mid form instead at the top? I have some common fields fields that do not go into the tabbed sections but are header fields...

Sorry, just found the div for tab placement.

@smladmin, I'm trying to do the same thing. I want a few fields to always appear at the top, with the tabs appearing underneath. I see the part for jQuery('.frm-show-form').prepend('<div id="tab_headings"></div>'); // place this wherever you want your tabs to show up but I don't seem to be placing it correctly. :(

If I've got 2 fields in the form, followed by sections and I want the tabs to all show under the first 2 fields, where would I put that piece of code - I'm doing it wrong. Thanks for any help.

B.

@DarrylErentzen,

Does this code need updating for v4? I tried as described on https://broadstreetnetwork.com/labs/formidable-pro/formidable-pro-easy-tabs-jquery/ and here and no luck.