<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width" />
<!-- Custom Fonts -->
<title>Form test</title>
<link href="" rel="stylesheet" type="text/css">
<style>
html {
scroll-behavior: smooth;
}
</style>
<script>
/* config area - replace with your instance values */
var mktoFormConfig = {
podId : "//app-sj06.marketo.com",
munchkinId : "857-YGR-659",
formIds : [3909, 3908]
};
/* ---- NO NEED TO TOUCH ANYTHING BELOW THIS LINE! ---- */
function mktoFormChain(config) {
/* util */
var arrayify = getSelection.call.bind([].slice);
/* const */
var MKTOFORM_ID_ATTRNAME = "data-formId";
/* fix inter-form label bug! */
MktoForms2.whenRendered(function(form) {
var formEl = form.getFormElem()[0],
rando = "_" + new Date().getTime() + Math.random();
arrayify(formEl.querySelectorAll("label[for]")).forEach(function(labelEl) {
var forEl = formEl.querySelector('[id="' + labelEl.htmlFor + '"]');
if (forEl) {
labelEl.htmlFor = forEl.id = forEl.id + rando;
}
});
});
/* chain, ensuring only one #mktoForm_nnn exists at a time */
arrayify(config.formIds).forEach(function(formId) {
var loadForm = MktoForms2.loadForm.bind(MktoForms2,config.podId,config.munchkinId,formId),
formEls = arrayify(document.querySelectorAll("[" + MKTOFORM_ID_ATTRNAME + '="' + formId + '"]'));
(function loadFormCb(formEls) {
var formEl = formEls.shift();
formEl.id = "mktoForm_" + formId;
loadForm(function(form) {
formEl.id = "";
if (formEls.length) {
loadFormCb(formEls);
}
});
})(formEls);
});
}
mktoFormChain(mktoFormConfig);
</script>
</head>
<body>
<div style="width: 80%;">
<form data-formId="3909" data-formInstance="one"></form>
<form data-formId="3908" data-formInstance="one"></form>
<form data-formId="3909" data-formInstance="two"></form>
</div>
</body>
.png)