Formidable Forms Community Site

The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk
Subscribe

A Great Solution for Nested Tab Forms

Labels

This Discussion is public

Notifications

I found a great solution for creating nested tab forms in Formidable Pro. Please take a look at this demo page:

http://victorfont.com/formidable-pro-tabbed-form-sample/

The tabs are created with the Squelch Tabs and Accordions Shortcodes plugin. I tried several tabs plugins and this worked the best. There are a couple of little tricks that you need to know before you can get a page to perform like the sample. I'm putting together a video tutorial to show how it's done. It should be ready in a few days.

Play with the form and see what it does. The form is set to not save submissions.

BTW, there's jQuery code embedded in the After Fields box that copies the field data from the permanent to temporary address nested tabs. Please feel free to help yourself to the code.

Very cool!  Looks good. Please link to tutorial when you get it done.

Victor, any update on the code and video?

Not yet avidear. I'm working on it, but it's slow going due to my other commitments. I should have it ready in another week or so. I'll post an update here when it's on YouTube.

Looks great Victor.  I am interested as well when you get the video up.

By the way, if you email me (cohan.mike@gmail.com) when you do I will share it on my social media properties as it will be very useful.

Has there been any update to this?  I am also interested in figuring this out as it would make some tasks so much easier on the front end.

I'm just finishing up a major project today. This is on my todo list for this week.

Thanks Victor, look forward to the youtube and using it.

Avi

Victor any updated on the above. You are welcome to offer consulting on one of my site.

Please contact if you are interested (avidear@gmail.com)

 

vfontjr,

I've got the tabs implemented, but the form doesn't submit. Any tricks with that?

Robert,

There's no trick. I've found if you are using a section heading, it will interfere with the tabs forming properly. Also, if you have any unbalanced shortcodes in the custom html, this will cause the form to fail.

I've figured out the problem. The tab shortcodes cannot reside directly within or outside the before or after fields. They must reside between.

Yes, that is correct Robert. It has to be in the HTML fields.

Hey that's pretty cool. Good job!

All worked fine so far! I added the code Victor provided into funtion.php, submits, and saves thanks a lot Victor! you are no' 1!

Victor

Followed your link to demo but some-things broken.

See attached screenshot of what I see in Chrome & FF

 

Henk

Thank you Henk. All fixed.

Hi Victor,

Thanks for this useful demo and formidable tip. I decided to utilise the Squelch tabs option for my form as shown, however, getting the attached error.

I have a page builder plugin installed called Unyson and have since disabled it from my page form completely. However I'm still getting the same error popping up.

Im using WP ver 4.52 with the code edits you provided added to the functions.php file.  Do you think I may be missing something else apart from this?

Thanks for you great help.

Regards...Leslie

 

 

You may have disabled the pagebuilder from the form page, but it appears that there may be a shortcode from the pagebuilder left in the form somewhere. Since the Formidable Pro version 2.08 release, it does not execute 3rd party shortcodes without adding some custom code to functions.php. This explains the details: http://victorfont.com/formidable-pro-3rd-party-shortcodes/

Hi Victor,

Went through the code in detail again and found that the problem was indeed the pagebuilder. Ended up using an HTML solution for each section heading. Thanks for all your help.

I wanted to inquire about the tooltip functionality as well in your demo. Is there any possibilty you can forward the function code details for it.  My forms are quite large and I am forced to use the tabs along with these features to make things more user friendly....

Thanks Leslie

Leslie,

The jQuery Tooltips extension is installed and pre-registered in WordPress.  To activate it, you need to include in the code your theme is using to enqueue it's scripts.

wp_enqueue_script( 'jquery-ui-tooltip' );

Tooltips display whatever text is in the element's title attribute. Radio buttons and checkboxes don't have a title attribute accessible through Formidable. You have to add the attributes with jQuery. The code from my demo form is below. This also activates the tooltips.


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 );
$( "" )
.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.');

});

I think that's all. I don't remember if I created CSS for the tooltip arrow, and I don't remember where I installed it if I did. I wrote this code a few years ago.

Hi Victor,

Found a CSS reference that you created for this tool on another site and was able to utilize it.

Just one thing I noticed which is that the bubble moves upward, away from the field when the mouse is moved down from one radio option to the next. It appears in the correct position at first but then adjusts quickly upward. Have you encountered this particular issue before?

Was looking at the code again to see what could be causing it, however, couldn't see anything unusual. Suspect it might be a formatting conflict with the formidable styles itself...

I've attached the screenshot for reference.

Thanks again...Leslie

Yes, I have seen this Leslie. It has nothing to do with Formidable or Formidable styling. It has everything to do with mouse pointer position. This is really not a topic for the Formidable forum, since the issues you have with tooltips have nothing to do with Formidable. You can message me through my website if you want to continue this conversation.

Oh OK. Will do. Thanks again!

Discussion closed.