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
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();
});
});
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.