SOLVED

Submit a hidden Marketo form with 2 forms on page

Go to solution
thomas-nomad
Level 1

Submit a hidden Marketo form with 2 forms on page

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

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Submit a hidden Marketo form with 2 forms on page

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

 

View solution in original post

3 REPLIES 3
Floyd_Alvares2
Level 8

Re: Submit a hidden Marketo form with 2 forms on page

@thomas-nomad 

I am definitely not @SanfordWhiteman.

But highlighting his solution to the same problem you are facing

 

SanfordWhiteman
Level 10 - Community Moderator

Re: Submit a hidden Marketo form with 2 forms on page

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
Level 1

Re: Submit a hidden Marketo form with 2 forms on page

Thanks @SanfordWhiteman . Works perfectly.