Author's Note: Since I first published this demo form, Strategy 11 released Formidable Pro 2.0.9 and higher. Because of security concerns, these releases no longer process third party shortcodes without making adjustments in your child theme's functions.php file. The code found at the end of the page, provided by Strategy 11, should be added to your functions.php if you are using the Squelch Tabs and Accordions Shortcodes plugin to create your tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* this is custom code required for Formidable Pro 2.0.9 and higher */ /* if you use the Squelch Tabs and Accordions plugin */ /* to create a tabbed interface for your forms */ /* add this to the bottom of your theme's functions.php file. */ add_filter( 'frm_filter_final_form', 'filter_squelch_tabs' ); function filter_squelch_tabs( $form ) { global $shortcode_tags; $original_shortcodes = $shortcode_tags; $limited_shortcodes = array( 'tabs' => $shortcode_tags['tabs'], 'subtabs' => $shortcode_tags['subtabs'], 'subsubtabs' => $shortcode_tags['subsubtabs'], 'tab' => $shortcode_tags['tab'], 'subtab' => $shortcode_tags['subtab'], 'subsubtab' => $shortcode_tags['subsubtab'], 'toggles' => $shortcode_tags['toggles'], 'subtoggles' => $shortcode_tags['subtoggles'], 'subsubtoggles' => $shortcode_tags['subsubtoggles'], 'toggle' => $shortcode_tags['toggle'], 'subtoggle' => $shortcode_tags['subtoggle'], 'subsubtoggle' => $shortcode_tags['subsubtoggle'], 'accordions' => $shortcode_tags['accordions'], 'subaccordions' => $shortcode_tags['subaccordions'], 'subsubaccordions' => $shortcode_tags['subsubaccordions'], 'accordion' => $shortcode_tags['accordion'], 'subaccordion' => $shortcode_tags['subaccordion'], 'subsubaccordion' => $shortcode_tags['subsubaccordion'], 'haccordions' => $shortcode_tags['haccordions'], 'subhaccordions' => $shortcode_tags['subhaccordions'], 'subsubhaccordions' => $shortcode_tags['subsubhaccordions'], 'haccordion' => $shortcode_tags['haccordion'], 'subhaccordion' => $shortcode_tags['subhaccordion'], 'subsubhaccordion' => $shortcode_tags['subsubhaccordion'] ); $shortcode_tags = $limited_shortcodes; $form = do_shortcode( $form ); $shortcode_tags = $original_shortcodes; return $form; } add_filter( 'frm_do_html_shortcodes', '__return_false' ); |
Formidable Pro Settings/Customize HTML Examples
The following code snippets are from the sample form's Settings/Customize HTML Page to demonstrate how to insert the shortcodes from the Squelch Tabs and Accordions Shortcodes plugin.
1 2 3 4 5 6 7 8 9 10 | [tabs title="" disabled="false" active="0" event="click"] [tab title="Personal Details"] <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> <label for="field_[key]" class="frm_primary_label">[field_name] <span class="frm_required">[required_label]</span> </label> [input] [if description]<div class="frm_description">[description]</div>[/if description] [if error]<div class="frm_error">[error]</div>[/if error] </div> |
1 2 3 4 5 6 7 8 9 10 11 | [subtabs title="Additional Info"] [subtab title="Permanent Address"] <h2>Permanent Address</h2> <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> <label for="field_[key]" class="frm_primary_label">[field_name] <span class="frm_required">[required_label]</span> </label> [input] [if description]<div class="frm_description">[description]</div>[/if description] [if error]<div class="frm_error">[error]</div>[/if error] </div> |
1 2 3 4 5 6 7 8 9 10 11 | [/subtab] [subtab title="Temporary Address"] <h2>Temporary Address</h2> <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> <label class="frm_primary_label">[field_name] <span class="frm_required">[required_label]</span> </label> <div class="frm_opt_container">[input]</div> [if description]<div class="frm_description">[description]</div>[/if description] [if error]<div class="frm_error">[error]</div>[/if error] </div> |
1 2 3 4 5 6 7 8 9 10 | [/subtab] [subtab title="Demographics"] <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> <label for="field_[key]" class="frm_primary_label">[field_name] <span class="frm_required">[required_label]</span> </label> [input] [if description]<div class="frm_description">[description]</div>[/if description] [if error]<div class="frm_error">[error]</div>[/if error] </div> |
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> <label for="field_[key]" class="frm_primary_label">[field_name] <span class="frm_required">[required_label]</span> </label> [input] [if description]<div class="frm_description">[description]</div>[/if description] [if error]<div class="frm_error">[error]</div>[/if error] </div> [/subtab] [/subtabs] [/tab] [/tabs] |
The After-fields jQuery
After several requests to provide this code, here is is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <script> jQuery(document).ready(function($){ // activate the tooltip function $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); // add title attributes to ethnicity and race fields so tootips display $('#field_2f4fn7-0').attr('title', 'A person of Cuban, Mexican, Puerto Rican, South or Central American, or other Spanish Culture or origin regardless of race.'); $('#field_tp1j02-0').attr('title', 'A person having origins in any of the original peoples of North and South America (including Central America) and who maintains tribal affiliation or community attachment.'); $('#field_tp1j02-1').attr('title', 'A person having origins in any of the original peoples of the Far East, Southeast Asia, or the Indian subcontinent, including, for example, Cambodia, China, India, Japan, Korea, Malaysia, Pakistan, the Philippine Islands, Thailand, and Vietnam.'); $('#field_tp1j02-2').attr('title', 'A person having origins in any of the black racial groups of Africa.'); $('#field_tp1j02-3').attr('title', 'A person having origins in any of the original peoples of Europe, the Middle East, or North Africa.'); $('#field_tp1j02-4').attr('title', 'A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.'); // populate current address $(function(){ $("#field_224zki-0").change(function() { if ($("#field_224zki-0:checked").length > 0) { bindCurrent(); } else { unbindCurrent(); } }); }); var bindCurrent = function() { // First copy values $("input[id='field_ehojnh']").val($("input[id='field_3l3cwp2']").val()).attr("readonly",true); //address $("input[id='field_pfyu8e']").val($("input[id='field_puitbx2']").val()).attr("readonly",true); // address2 $("input[id='field_f3259j']").val($("input[id='field_w8z3lb2']").val()).attr("readonly",true); // city $("select[id='field_urw4bt']").val($("select[id='field_9c57wk2'] option:selected").val()).attr("disabled",true); // state $("input[id='field_ele4cr']").val($("input[id='field_xk12lc2']").val()).attr("readonly",true); // zip $("select[id='field_8w230h']").val($("select[id='field_j9nrol2'] option:selected").val()).attr("disabled",true); // country // Then bind fields // address $("input[id='field_3l3cwp2']").keyup(function() { $("input[id='field_ehojnh']").val($(this).val()); }); // address2 $("input[id='field_puitbx2']").keyup(function() { $("input[id='field_pfyu8e']").val($(this).val()); }); // city $("input[id='field_w8z3lb2']").keyup(function() { $("input[id='field_f3259j']").val($(this).val()); }); // state $("select[id='field_9c57wk2']").change(function() { $("select[id='field_urw4bt']").val($(this).val()); }); // zip $("input[id='field_xk12lc2']").keyup(function() { $("input[id='field_ele4cr']").val($(this).val()); }); // country $("select[id='field_j9nrol2']").change(function() { $("select[id='field_8w230h']").val($(this).val()); }); }; var unbindCurrent = function() { /* unbind fields */ $("input[id='field_3l3cwp2']").unbind("keyup"); $("input[id='field_puitbx2']").unbind("keyup"); $("input[id='field_w8z3lb2']").unbind("keyup"); $("select[id='field_9c57wk2']").unbind("change"); $("input[id='field_xk12lc2']").unbind("keyup"); $("select[id='field_j9nrol2']").unbind("change"); /* clear readonly and disabled attributes */ $("input[id='field_ehojnh']").removeAttr("readonly"); $("input[id='field_pfyu8e']").removeAttr("readonly"); $("input[id='field_f3259j']").removeAttr("readonly"); $("select[id='field_urw4bt']").removeAttr("disabled"); $("input[id='field_ele4cr']").removeAttr("readonly"); $("select[id='field_8w230h']").removeAttr("disabled"); /* clear fields */ $("input[id='field_ehojnh']").val(""); $("input[id='field_pfyu8e']").val(""); $("input[id='field_f3259j']").val(""); $("select[id='field_urw4bt']").val(""); $("input[id='field_ele4cr']").val(""); $("select[id='field_8w230h']").val(""); /* set focus to address */ $("input[id='field_ehojnh']").focus(); }; }); </script> |