3 Gravity Forms on one page

Question

I'm currently displaying three gravity forms on a page, "display:none;", and setting them to "block" when one of the three corresponding buttons are clicked.

You can view the example on http://b2bsauce.com/

The problem is that on validation, the AJAX part reloads, with the error messages and again displays the form as hidden, which obviously, in this case, does not make sense.

Is there any way I can hook into the validation process and set the form to display or should I have gone about this in another way?

JS

var form = jQuery(this).attr('href');
jQuery('.gform_wrapper').not(form).css('display','none');
jQuery(form).slideDown();

HTML

Each form is contained in this wrapper, which is set to "display:none".

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_1" style="display: block;">
</div>

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_2" style="display: block;">
</div>

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_3" style="display: block;">
</div>

martincarlin87 martincarlin87 · Accepted Answer · 2015-08-11T14:25:41

Submit buttons don't have the href attribute (assuming that's what is being clicked), are you trying to get the action of the form or just save the form instance itself to a variable?

I think you are trying to save the form element to a variable so I would change your code to:

var $form = jQuery(this).parents('form'); // use $ prefix to show it's a jQuery object
jQuery('.gform_wrapper').not($form).css('display','none');
jQuery($form).slideDown(); // not sure if you need this line if the form is already showing

but I'm not sure if that's all you need or not without some sort of self contained example that can be edited.

3 Gravity Forms on one page

2 Answers