Is there a workaround to have multiple Marketo forms on the same page?

[dkonig]

Very simple. I need to have the ability to add various Marketo forms on the same page. Is there a way to do this?

[SanfordWhiteman · Accepted solution]

There sure is: https://blog.teknkl.com/multiple-forms-multiple-times/

[dkonig]

Thanks. I'm trying to grasp how that blog post applies to using the Marketo API. Below is the typical code used to render a form on the page and return a response on a successful submission. What I am finding is that when I have two separate forms on the same page(different form ID's) Both form confirmation messages pop and both dataLayer.push() events also fire. How would I change up the code so both forms work on the same page but only fire their own events?

<script src="//app-sj12.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234">
</form>
<script>MktoForms2.loadForm("//app-sj12.marketo.com", "123-ABC-456", 1234);</script>
<!--  Marketo Form Script  -->
<script>
MktoForms2.whenReady(function (form){
   form.onSuccess(function(values, followUpUrl){
    dataLayer.push({
    'event': 'test event',
    'event_category': 'test category',
    'event_action': 'test action',          
    'event_label': 'test label'         
    });
    form.getFormElem().hide();
    document.getElementById('confirmform').style.display = 'block';
    return false;
  });
});
</script>
<!--  Form Confirmation Message  -->
<div id="confirmform" class="form-confirmation-message">
<div class="form-confirmation-message-header">Thank you for contacting Us.</div>
We'll be in contact soon.
</div>

[SanfordWhiteman]

---

Thanks. I'm trying to grasp how that blog post applies to using the Marketo API

---

Well, the code in the blog post extensively uses the Forms API, as you can see.

But if the snippet you posted is the only code related to forms, there's no reason for both confirmation messages to be displayed — even without the fixes in the blog post.

I suspect, though, that isn't the only forms code on your page! Please supply a link to your page so I can inspect.

[dkonig]

Thanks for the response @SanfordWhiteman . I've only recently started working with APIs and have only worked with the code I posted. No doubt I missed that the code in the blog was also related to the API 🙂

I can't publicly share a sample page but I can pose this question. If a page had the block of code I posted twice on the page with the only difference being the Marketo form number how would I make that work correctly?

[SanfordWhiteman]

---

 If a page had the block of code I posted twice on the page with the only difference being the Marketo form number how would I make that work correctly?

---

If you have that same code block 2x on the page, then every onSuccess is going to fire twice, by definition. That'll mean the dataLayer push is duplicated.

But that doesn't actually have to do with multiple forms. It would be the same if you had only one <form> element but multiple whenReady listeners.

You must include the whenReady code only once.

[dkonig]

Hmmm. That makes sense. Is there a way to fire separate dataLayer push events for each form then?

[SanfordWhiteman · Accepted solution]

---

Hmmm. That makes sense. Is there a way to fire separate dataLayer push events for each form then?

---

Yes, you can check the form ID in the callback:

MktoForms2.whenReady(function(mktoForm){
  let formId = mktoForm.getId();

  switch(formId){
  case 1234:
     // do something
     break;
  case 6789:
     // do something else
     break;
  }
});

[dkonig]

Excellent. I'll see what I can make happen with this. Thanks!

[dkonig]

Sorry for the delay getting back to this. What would I do with the confirmation message with the switch? Would I put it in both switch cases?  I'm just going to assume that both messages will be worded different.

Where would the onSuccess handle go in the switch?

<!--  Form Confirmation Message  -->
<div id="confirmform" class="form-confirmation-message">
<div class="form-confirmation-message-header">Thank you for contacting us.</div>
We'll be in contact soon.
</div>