19 Replies Latest reply on Feb 22, 2019 7:05 PM by Sanford Whiteman

    Two Forms, One Page?

    Marcie Fontecchio

      Is it possible to have two functioning Marketo forms on the same webpage (non-Marketo landing page)? Either two of the same form or one Form A and one Form B - are either/both possible? We have tried in the past and run into processing and styling issues, but we are launching a new site and are hoping to revisit this issue.

       

      Is anyone doing this right now? Is it working?

       

      The use case is that we have a form in our footer, but we'd like the occasional product-specific form or just the same general form to show up elsewhere on the page.

        • Re: Two Forms, One Page?
          Sanford Whiteman

          Yes, it's possible.  You have to inject the forms, let us say, mindfully into the page. A running demo is here:

           

          MktoForms2 :: Multiple Forms, Multiple Times

           

          You can see that the page is running 3 Marketo forms: 2 instances of form #341 (which is harder to do than multiple form IDs!) and and 1 instance of form #335.  Each form functions separately without polluting the others (most people think they have this working but they don't realize that the forms are interfering with each other).

           

          The only part of the JS code (in the JS pane) you'd change is the mktoFormConfig block.

           

          But very close attention to the way the HTML <form> elements are formed  (in the HTML pane): they have the class mktoForm but no id attribute, and they have the extra attributes data-formId and data-formInstance.  The data-formInstance is optional (it's just a cosmetic identifier to distinguish between copies of the same form) but the data-formId is required and contains (naturally) the form ID that goes in it.

          2 of 2 people found this helpful
            • Re: Two Forms, One Page?
              Maria Snow

              Thank you - this was helpful - I tried to add a thank you message as below to hide form and add message relative to each form on the page - but it wasn't working - where would I insert this in your code or do you have an example?

               

              form.onSuccess(function(values, followUpUrl) {
                document.getElementById('mktoForm_8418').style.display = 'none';
                document.getElementById('thankyou').style.display = 'block';
              // Return false to prevent the submission handler continuing with its own processing
                  return false;
              

               

               

               

              Thanks in advance!

                • Re: Two Forms, One Page?
                  Sanford Whiteman

                  Please go back and edit your post, using the Advanced Editor's syntax highlighter so the code is readable.

                   

                  https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

                   

                  Anyway, you most certainly cannot do it the way you've sketched out here. You're searching for ID attributes across the document, assuming they're unique.  In this case they're not and you'll always find the first one in the DOM. You need to constrain your searches to the current form element, for example like so:

                   

                  MktoForms2.whenReady(function(form){
                    var formEl = form.getFormElem()[0],
                        followUpContainer = formEl.querySelector(".some-element-that-you'll-show-instead-of-the-whole-form");
                  
                    form.onSuccess(function(values, followUpUrl){
                      formEl.parentNode.replaceNode(followUpContainer,formEl);
                      return false;
                    });
                  });
                  
                    • Re: Two Forms, One Page?
                      Maria Snow

                      Done - sorry

                       

                      So in your example on the codepen, how would it work in that scenario if you provided a different thank you message for each of those 3 form instances?

                       

                      Thank you.

                        • Re: Two Forms, One Page?
                          Sanford Whiteman

                          To use the code I just provided:

                           

                          1. create a Rich Text block on the form
                          2. inside the RT block put a <div> that's hidden by default (via external <style> rule, or inline style="display:none;" if you insist)
                          3. inside the hidden <div>, create another <div> with class="some-element-that-you'll-show-instead-of-the-whole-form" (obviously that's a ridiculous name, you'd use class="thankYouMessage" or whatever)

                           

                          The onSuccess function replaces the entire <form> tag with the <div class="thankYouMessage"> in exactly the same spot in the HTML. Moving the Thank You message outside of the hidden container naturally unhides it.

                           

                          Each form can thus have its own version of the Thank You message.  You could also check to see if the Thank You container exists, and if it doesn't exist redirect to the configured Thank You URL.

                           

                          MktoForms2.whenReady(function(form){  
                            var formEl = form.getFormElem()[0],  
                                followUpContainer = formEl.querySelector(".thankYouMessage");  
                            
                            form.onSuccess(function(values, followUpUrl){  
                              if ( followUpContainer ) {
                                formEl.parentNode.replaceNode(followUpContainer,formEl);  
                                return false;
                              } 
                            });  
                          }); 
                          
                  • Re: Two Forms, One Page?
                    Sanford Whiteman

                    Marcie can you mark my answer as correct, unless you think I've missed something?

                    • Re: Two Forms, One Page?
                      Chris Warr

                      I tried adding this to a simple page with your code and it worked here http://www.thosedigitalthoughts.com/test-2.html

                       

                      When I use my version and swap out the form ID's it doesnt work however http://www.thosedigitalthoughts.com/test.html

                       

                      Is there something I am missing from within Marketo. I get an error in console that says "Subscriber '280-LNO-408' is not valid"