Multiple Forms on a Page - Weird behavior when some labels are clicked

[Lucho_Soto]

We have 3 forms on this page on our website http://www.hatchearlylearning.com/customer-support/hatch-tech-support . The bottom 2 forms are accessed by clicking on the link that says Upgrade iSS Software and Upgrade TeachSmart Software, respectively.

For some reason, clicking on some of the labels on the 2 bottom forms (First Name text, Last Name Text, etc.) makes users jump to the top of the page to the matching field on the first form. It looks like this is happening with the field names that the top form and the bottom forms have in common.

I filed a ticket with support and was told this is out of their scope and that only 1 form is supported per page. Has anyone run into this issue with multiple forms on one page or have any ideas on how to get around it?

[SanfordWhiteman · Accepted solution]

I filed a ticket with support and was told this is out of their scope and that only 1 form is supported per page.

Ha, gotta love it.

Add this:

MktoForms2.whenRendered(function(form){
  var formEl = form.getFormElem()[0],
      rando = '_' + Math.random();
  [].slice.call(formEl.querySelectorAll('label[for]')).forEach(
    function(labelEl){
      var forEl = formEl.querySelector('[id="'+ labelEl.htmlFor + '"]');
      labelEl.htmlFor = forEl.id = forEl.id + rando;
    });
});

[Lucho_Soto]

Thanks for your help, Sanford. Would this be added to each form on the page or just the ones that are having issues? Sorry, I only have a very rudimentary understanding of form functions. I took a stab at it below:

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1598"></form>

  <script>MktoForms2.loadForm("//app-sj04.marketo.com", "980-GBD-747", 1598);</script>

<script>

MktoForms2.whenRendered(function(form){ 

  var formEl = form.getFormElem()[0], 

      rando = '_' + Math.random(); 

  [].slice.call(formEl.querySelectorAll('label[for]')).forEach( 

    function(labelEl){ 

      var forEl = formEl.querySelector('[id="'+ labelEl.htmlFor + '"]'); 

      labelEl.htmlFor = forEl.id = forEl.id + rando; 

    }); 

}); 

</script>               

<script>

                    MktoForms2.whenReady(function (form){

                        //Add an onSuccess handler

                        form.onSuccess(function(values, followUpUrl){

                            //get the form's jQuery element and hide it

                            form.getFormElem().hide();

                            document.getElementById('confirmformupgrade').style.visibility = 'visible';

                            //return false to prevent the submission handler from taking the lead to the follow up url.

                            return false;

                        });

                    });

                </script>

                <div id="confirmformupgrade" style="visibility:hidden; text-align: center;">Thank you! We will be in touch soon.</div>

            </div>

[SanfordWhiteman]

Just add it once. It covers all forms.

The reason for the observed behavior is that -- as explicitly defined by the HTML standard -- a label's for attribute targets the first matching element in the DOM.  Ergo if there are multiple elements with the same ID (which, despite being invalid, is supported by all browsers) the first one will be used. Luckily querySelector lets us target by parent element and ID, so we can correctly seek the element we want and then make its name truly unique.

[Nav_Singh1]

Hi Sanford,

Wanted to just drop you a note to see if this project I'm working on makes sense. Basically I wanted to hide 1 Marketo form (a cloned version of our submission form) on a page and pass through the values from the first form inverted on success (e.g. guest first name and guest company on the main form would become first name and company on the hidden form).

Would modifying the On.Submit to set the field values on the hidden form be the right way of accomplishing this?

[SanfordWhiteman]

Can you open a new thread please?

[Mathias_Madsen]

You, my sir, are a hero!

Love this elegant hack

[Lucho_Soto]

Implemented this on our dev site and it works perfectly. We'll roll it out to the main site as soon as the rest of the page is approved internally. Thanks for your help!