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

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