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/

[SanfordWhiteman · Accepted solution]

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

[aaroncemery]

Hi All -

I've been workshopping this exact issue all night and have a question about it. I'm currently using the snippet from the codepen here: https://codepen.io/figureone/pen/ayKadR?editors=1010 and it's working as expected, my only issue is that i'm having a hard time adding an onSubmit callback to it. I'm needing to add that so i can do some chilipiper checks prior to pushing to a thank you page. here's a snippet of what i'm doing. don't mind the onSubmits i currently have, i've just been trouble shooting and adding them to see what the behavior is. Just to recap, the forms are all loading and submitting, and it looks like the onSubmit is working, i can trigger a console.log with it, but the behavior isn't quite right. it's pushing to the thank you page way to fast. However, when i add the onSubmit into this section

var loadForm = window.MktoForms2.loadForm.bind(

window.MktoForms2,

config.podId,

config.munchkinId,

formId

),

it works as i expect, but breaks the ability to load all the forms on the page, it just does the first one. any help would be very appreciated!

import { cpCheck } from '@utils/chiliPiper'
/* eslint-disable no-undef */
function mktoFormChain(config) {
  /* util */
  var arrayify = getSelection.call.bind([].slice)

  /* const */
  var MKTOFORM_ID_ATTRNAME = 'data-mktoid'

  /* fix inter-form label bug! */
  window.MktoForms2.whenRendered(function (form) {
    var formElement = form.getFormElem()[0],
      rando = '_' + Date.now() + Math.random()

    for (const labelElement of arrayify(
      formElement.querySelectorAll('label[for]')
    )) {
      var forElement = formElement.querySelector(
        '[id="' + labelElement.htmlFor + '"]'
      )
      if (forElement) {
        labelElement.htmlFor = forElement.id = forElement.id + rando
      }
    }
  })

  /* chain, ensuring only one #mktoForm_nnn exists at a time */
  for (const formId of arrayify(config.formIds)) {
    var loadForm = window.MktoForms2.loadForm.bind(
        window.MktoForms2,
        config.podId,
        config.munchkinId,
        formId
      ),
      formEls = arrayify(
        document.querySelectorAll(
          '[' + MKTOFORM_ID_ATTRNAME + '="' + formId + '"]'
        )
      )
    ;(function loadFormCallback(formEls) {
      var formElement = formEls.shift()
      formElement.id = 'mktoForm_' + formId

      loadForm(function (form) {
        formElement.id = ''
        form.onSubmit(() => {
          console.log('submitting...')
          // form.getFormElem().hide()
          const vals = form.vals()
          cpCheck(vals.Email, formId)
          return false
          // form.submit(vals)
        })
        if (formEls.length > 0) {
          loadFormCallback(formEls)
        }
      })
    })(formEls)
  }

  MktoForms2.whenReady(function (form) {
    let formId = form.getId()

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

export const getForms = formIds => {
  /* config area - replace with your instance values */

  var mktoFormConfig = {
    podId: '####',
    munchkinId: '####',
    formIds: [formIds],
  }

  /* ---- NO NEED TO TOUCH ANYTHING BELOW THIS LINE! ---- */

  mktoFormChain(mktoFormConfig)
}

[SanfordWhiteman]

The code in my Pen is deliberately compatible with IE 11, so if you change it just to use late-model JS module import and export, I won’t be able to help you with it. Preserving compatibility is important to the wider community.

In any case, it’s unclear what you mean by “way too fast.“ Either the form submits or it doesn’t, and you can check this in the F12 Network tab. The Thank You URL is only known after the form is successfully submitted (assuming you mean the TY page configured in form editor), so there’s no way for the form to skip to that URL without first submitting.

[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]

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>

[dkonig]

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