Multiple Marketo Form Configuration

[Nick_Nappo]

We are trying to add multiple different Marketo forms to a single page.  (These forms may have the same fields, but they have different form ids.)  While the logic seems to work, clicking on the modal link to the modal Marketo form seems to interfere / conflict with the Marketo form in the footer somehow.

What could be the issue here?  Is it the fact that both forms are asking for email address?  Or maybe that the footer form was cloned from the original?

Thanks, all!

[SanfordWhiteman]

https://nation.marketo.com/groups/newyork-user-group/blog/2017/11/27/multiple-marketo-forms-multiple... 

[Kevin_Lustgarte]

The link you posted is no longer active. Instead of starting a new thread I want to know how you might handle this situation. We have a lead gen page where we tell prospects to contact one of three people. Currently, we're listing each person's work email address. We get no analytics or tracking of any type if a lead goes that route instead of filling out the Marketo form (on the same page). How would you re-work/optimize the right rail on this page to ensure we capture data on all inquiries? https://business.premera.com/contact-us/

[SanfordWhiteman]

The link still works, but I think you have to be an NYC MUG member now. The full post is also here.

---

The link you posted is no longer active. Instead of starting a new thread I want to know how you might handle this situation. We have a lead gen page where we tell prospects to contact one of three people. Currently, we're listing each person's work email address. We get no analytics or tracking of any type if a lead goes that route instead of filling out the Marketo form (on the same page). How would you re-work/optimize the right rail on this page to ensure we capture data on all inquiries? https://business.premera.com/contact-us/

---

Can we have a new thread though? 🙂 Seems very different from the original topic.

[Jo_Pitts1]

Sanford,

I get how the basic multiple form load stuff works - brilliant and as always thank you!

How about when it gets 'trickier' :)... I have a few code snippets in use, all provided by you over the years.

1. Hiding the form and replacing it with an acknowledgement message on submit (hiding one div, showing another)
2. Extending the validation on a field.   

This code demonstrates both of these

<!-- Marketo Form -->
<div id="formDisplayOuter">
<h3>Thanks for taking part in the Big Night in Quiz</h3>
<p>Sign up here to be kept up to date with all our future Big Night in Events, and occasional news and updates from Metlifecare</p>
<div id="formDisplayDiv" style="padding-top: 30px;">
</div>
</div>
<div id="formAcknowledgeDiv" style="display: none;">
<h3>Thanks for signing up.</h3>
<p>We'll be in touch with more Big Night In events.</p>
</div>


<script src="//info.metlifecare.co.nz/js/forms2/js/forms2.min.js"></script>
<script>
MktoForms2.whenReady(function(form) {
 form.setValues({metlife_villages_of_interest_brochure : "BAY"  });
  var formEl = form.getFormElem()[0],
               submitEl = formEl.querySelector('BUTTON[type="submit"]');
  document.getElementById("formDisplayDiv").appendChild(formEl);
  form.onSuccess(function(vals, thankYouURL) {
    var x = document.getElementById("formAcknowledgeDiv");
    x.style.display = "block";
    var x = document.getElementById("formDisplayOuter");
    x.style.display = "none";
    return false;
    });
  form.onValidate(function(nativeValid) {
    if (!nativeValid) return;
    var fieldName = 'Phone',
      currentValue = form.getValues()[fieldName],
      elJq = form.getFormElem().find('#' + fieldName),
      limits = {
        minDigits: 7,
        maxDigits: 14
      },
      messages = {
        INVALID_CHARACTERS: 'Phone numbers may only have digits, spaces, and the characters + - . ( )',
        INVALID_DIALABLE_LENGTH: 'Phone numbers must have between ' +
          limits.minDigits + ' and ' +
          limits.maxDigits + ' digits'
      };
    form.submittable(false);
    if (currentValue.match(/[^0-9+\-.() ]/g)) {
      form.showErrorMessage(messages.INVALID_CHARACTERS, elJq);
      return false;
    } else if (currentValue.match(/\d/g).length < limits.minDigits || currentValue.match(/\d/g).length > limits.maxDigits) {
      form.showErrorMessage(messages.INVALID_DIALABLE_LENGTH, elJq);
      return false;
    }
    form.submittable(true);
  });
});
</script>

<form id="mktoForm_605"></form><script>MktoForms2.loadForm("//info.metlifecare.co.nz", "179-LVM-746", 605);</script>

I'm not sure how to handle those two things (let alone your prefill code for non LP based forms) in a multi form environment. 

As always, your insight is massively appreciated.

Cheers

Jo

[Kevin_Lustgarte]

great follow up questions. I'm interested, too.

[SanfordWhiteman · Accepted solution]

You can treat multiple forms in the same way (roughly) as when you have the same code that might need to act differently based on whether form ID 7777 or form ID 9999 is ready — even

That is, check form.getId() in the whenReady listener and then branch.

You might have different Thank You <div>s, for example, just tag each one with a data-for-id attribute.

Also, not too fond of switching styles directly in the code, setting a CSS class is easier to manage.

[Jo_Pitts1]

Doh.. so obvious.

Thanks @SanfordWhiteman for making the complex just so darned simple!

[Jo_Pitts1]

@SanfordWhiteman ,

btw - I love the My Beautiful Laundrette reference in your codepen for this.