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.
- Hiding the form and replacing it with an acknowledgement message on submit (hiding one div, showing another)
- 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
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.
.png){kind=icon}