Is it possible for two MktoForm2 methods to run on a single page?

[Raj_Ruprai1]

Hi,

As an example, we have two MktoForm2 methods that are added to a page (see example below): form.onSubmit() and form.onSuccess(). We used this Documentation​. In this example, we conditionally want to do something once the form is submitted, but not necessarily when it was submitted successfully since it is not critical to the form submission, but does need to be added to the page.

// This is added via GTM when an event is triggered such as "page url = /some/path/"
<script type="text/javascript">
  MktoForms2.whenReady(function(form) {
    form.onSubmit(function() {
      // do something.
      document.write("<div>hello</div>");
    });
  });
</script>

// This is added from our CMS when the page loads.
<script type="text/javascript">
  MktoForms2.loadForm("//app-abb.marketo.com", "082-KNA-087", 3469, function(form) {
    // On successful submission, push the dataLayer event to GTM.
    form.onSuccess(function(values, url) {
      // do something.
      location.href = url;
      return false;
     });
  });
</script>

[SanfordWhiteman · Accepted solution]

And you can run MktoForms.whenReady up to 10 times without problems, but I don't understand why you'd need to here.

Just pull out the onReady (the optional 4th argument of loadForm) and put everything in one whenReady.

MktoForms2.loadForm( "//instance.example.com", "aaa-bbb-ccc", 1234 );
MktoForms2.whenReady(function(form){
  form.onSubmit(function(form){
    // submit stuff
  });
  form.onSuccess(function(vals,tyUrl){
    // success stuff
  });
});

You can't use document.write, though!!! This has nothing to do with Marketo, it's a fundamental browser rule. No document.write after the page is done. (and preferably not at all).

[Raj_Ruprai1]

To confirm, the code from the question should work, but you are recommending to move everything into the MktoForms2.whenReady() instead?

[SanfordWhiteman]

It won't work, because you're using document.write, not because you have two MktoForms2 references.

[Raj_Ruprai1]

I should have used a better example. So something like this should work then by removing the document.write(), correct?

// This is added via GTM when an event is triggered such as "page url = /some/path/"  
<script type="text/javascript">  
 MktoForms2.whenReady(function(form) {  
    form.onSubmit(function() {  
      // do something. 
     document.getElementByTagname("BODY")[0].appendChild("<div>helo</div>");
    });  
  });  
</script> 

[SanfordWhiteman]

Yes, it will add the DIV when the form is about to be sent to Marketo.

[Raj_Ruprai1]

I see, we have implemented the suggestion and it worked in all test cases.

[SanfordWhiteman]

Please edit your post and highlight the code using the Advanced Editor's syntax highlighter so it's readable: