Skip to content

Instantly share code, notes, and snippets.

@DarrylErentzen
Last active June 4, 2021 15:12
Show Gist options
  • Save DarrylErentzen/11058641 to your computer and use it in GitHub Desktop.
Save DarrylErentzen/11058641 to your computer and use it in GitHub Desktop.
make a formidable form show tabs for each section
<!-- 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>
@bizarrb
Copy link

bizarrb commented May 3, 2019

@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.

@kingfisher64
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment