Submit a hidden Marketo form with 2 forms on page

Question

Hello (@Sanford  &#128512;)
 
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

SanfordWhiteman · Accepted Answer

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();    });});

falvares · Answer

@thomas-nomad I am definitely not @sanfordwhiteman.But highlighting his solution to the same problem you are facing

Sign up

Login with SSO

Login to the community

Login with SSO