Submit a hidden Marketo form with 2 forms on page

[thomas-nomad]

Hello (@Sanford 😀)

I have a use case where we have two site forms on the same page and need them to submit different Marketo forms in the background. I have put together a codepen to test it out, but when I submit either form both submissions go through. I figure that we need to combine both the background submission and two forms on the page but cannot get the code to mesh together.

Any help is much appreciated.

Best,

Thomas

[Floyd_Alvares2]

@thomas-nomad 

I am definitely not @SanfordWhiteman.

But highlighting his solution to the same problem you are facing

[SanfordWhiteman · Accepted solution]

Because whenReady fires for every form that’s ready, and you’re not doing any further filtering by ID.

You want only one whenReady listener:

MktoForms2.loadForm("//go.imply.io", "910-OTN-223", 1904);
MktoForms2.loadForm("//go.imply.io", "910-OTN-223", 1903);
MktoForms2.whenReady(function (mktoForm) {
  var customFormDataByMarketoFormId = {
    1904 : {
      formSelector: "#download-form",
      fieldMap: [
        {
          marketo: "Email",
          custom: "#download-email"
        },
        {
          marketo: "FirstName",
          custom: "#download-first-name"
        },
        {
          marketo: "LastName",
          custom: "#download-last-name"
        },
        {
          marketo: "Company",
          custom: "#download-organization"
        }
      ]
    },
    1903 : {
      formSelector: "#cloud-signup-form",
      fieldMap: [
        {
          marketo: "Email",
          custom: "#signup-email"
        },
        {
          marketo: "FirstName",
          custom: "#signup-first-name"
        },
        {
          marketo: "LastName",
          custom: "#signup-last-name"
        },
        {
          marketo: "Company",
          custom: "#signup-organization"
        }
      ]
    }
  };
  
  var customFormData = customFormDataByMarketoFormId[mktoForm.getId()];
  
  document
    .querySelector(customFormData.formSelector)
    .addEventListener("submit", function (e) {
      var customForm = e.target,
        mktoFields = {};

      // iterate over fields on custom form to create MktoForms-compat object
      customFormData.fieldMap.forEach(function (field) {
        mktoFields[field.marketo] = customForm.querySelector(field.custom).value;
      });

      // add to Marketo form
      mktoForm.addHiddenFields(mktoFields);

      // submit Marketo form
      mktoForm.submit();

      // stop custom HTML form submission
      e.preventDefault();
    });
});

[thomas-nomad]

Thanks @SanfordWhiteman . Works perfectly.