SOLVED

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

Go to solution
Raj_Ruprai1
Level 2

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

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>

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

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

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).

View solution in original post

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

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

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

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

SanfordWhiteman
Level 10 - Community Moderator

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

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).

View solution in original post

Raj_Ruprai1
Level 2

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

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

SanfordWhiteman
Level 10 - Community Moderator

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

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

Raj_Ruprai1
Level 2

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

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
Level 10 - Community Moderator

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

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

Raj_Ruprai1
Level 2

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

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