6 Replies Latest reply on Mar 26, 2018 9:24 AM by Sanford Whiteman

    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?

        • Re: Multiple Forms on a Page - Weird behavior when some labels are clicked
          Sanford Whiteman
          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;
              });
          });
          
            • Re: Multiple Forms on a Page - Weird behavior when some labels are clicked
              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>

                • Re: Multiple Forms on a Page - Weird behavior when some labels are clicked
                  Sanford Whiteman

                  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.

                • Re: Multiple Forms on a Page - Weird behavior when some labels are clicked
                  Nav Singh

                  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?

                • Re: Multiple Forms on a Page - Weird behavior when some labels are clicked
                  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!