Search code examples
javascriptjqueryajaxwordpressgravity-forms-plugin

3 Gravity Forms on one page

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>
Solution

  • Gravity forms can be a bit tricky at time and I eventually found the error.

    I used a "click" eventListener on the ".button" class to switch between hidden/block of the forms. However, the submit button in Gravity Forms also has a button class attached, hence it was hiding the form every time the submit button was clicked.

    I thus made sure that the click listener is only attached to the three buttons at the top.