2 forms on same page - If first has errors, second form scrolls to first

I found a unique issue when housing two forms on the same page. In my case, the top form is a single page form using ajax and the second form further down the page, is a multi-page form also using ajax. Both are different forms, different IDs.

If you start filling out the top form and get a validation error a new div is added to the form which is <div id="gf_form_focus" tabindex="-1"></div>. If you then leave that form without completing it and start the second form, clicking on the next button will cause the page to jump up to the first form. I tested this with gform_confirmation_anchor both enabled and disabled with the same result.

I wrote a basic fix for this scenario using jQuery but I think it would be best to fix it within the plugin itself. The jQuery script checks for the existence of the #gf_form_focus div and removes it on the button click.

$(document).on('click','.gform_wrapper input[type="submit"], .gform_wrapper input[type="button"]',function(e) {

            if( $('#gf_form_focus').length ) {
                $('#gf_form_focus').remove();
            }

        });

I can’t replicate the issue described in a default WordPress installation. I tried the following:

  1. Embedded one single page form and another multi-page form, both using ajax submission, into the same page.

  2. Tried to submit the first form leaving a required field blank to make the form fail validation.

3-a. Without correcting the error in the first form, scrolled down to the second form (multi-page), filled the fields for the first page, clicked Next, and it worked without issues showing me the second page.

3-b. Also tried leaving a required field empty in the second form, and the form is working without issues showing the error for the second form.

Try installing latest interim build from the downloads page to match what I’m using in my test site.

If that doesn’t help, I would recommend you to open a support ticket. Make sure to include the JSON export file for the two forms.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.