Formidable Pro Tabbed Form Sample - Victor Font Consulting Group, LLC

Note: Since this article was first published, 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.

[tabs title=”” disabled=”false” active=”0″ event=”click”] [tab title=”Personal Details”]

Name *

First

Last *

Last

Email *

[subtabs title=”Additional Info”] [subtab title=”Permanent Address”]

Permanent Address

Address *

Address Line 2

City *

State *

Postal Code

Country *

[/subtab] [subtab title=”Temporary Address”]

Temporary Address

Transfer Address

Click here if Temporary Address is the same as the Permanent Address

Address *

Address Line 2

City *

State *

Postal Code

Country *

[/subtab] [subtab title=”Demographics”]

Birthdate

Identify Ethnicity

Hispanic or Latino

Not Hispanic or Latino

Identify Race

American Indian or Alaska Native

Asian

Black or African American

Multiracial

Native Hawaiian or Other Pacific Islander

White

Please specify tribal affiliation:

Please specify multiracial:

[/subtab] [/subtabs] [/tab] [/tabs]

If you are human, leave this field blank.

Download the demo form’s XML

Functions.php

If you are using the Squelch Tabs and Accordions Shortcodes plugin or any 3rd-party plugin to create your tabs, add this code to the bottom of your theme’s functions.php or use a plugin like Code Snippets to execute this code. This is required for Formidable to process 3rd-party shortcodes.

If you are using a different 3rd-party plugin, modify the code for your specific shortcodes.

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-process_formidable_third_party_shortcodes-php

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. All other fields on this form render with their default Formidable HTML template.

Name

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-name-html

Address

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-address-html

Transfer Address

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-transfer_address-html

Birthdate

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-birthdate-html

Please specify multiracial:

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-please_specify_multiracial-html

The After-fields jQuery

This is the jQuery added to the form’s After Fields section:

https://gist.github.com/vfontjr/cbca2e6ccfa769c3957d11d21aa77574#file-after_fields_jquery-js