MktoForms2 :: One Form, Two Renders

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_169" class="mktoForm copy1"></form>
<form class="mktoForm copy2"></form>
<script>
    var instanceURL = '//app-sj01.marketo.com',
        munchkinId = '410-XOR-673',
        formid = 169;

    MktoForms2.loadForm(instanceURL, munchkinId, formid,

        function(form) {
            // strip original IDs, which are no longer necessary
            form.getFormElem()[0].removeAttribute('id');
            document.querySelector('.mktoForm.copy2').setAttribute('id', 'mktoForm_' + formid);

            // load second copy of form
            MktoForms2.loadForm(instanceURL, munchkinId, formid,
                function(form) {
                    form.getFormElem()[0].removeAttribute('id');

                    // demonstrate form independence
                    form.onValidate(function(nativeValidation) {
                        alert('second form validating')
                    });
                });

            // demonstrate form independence
            form.onValidate(function(nativeValidation) {
                alert('first form validating')
            });

        });

</script>

CSS

.mktoForm.copy1 {
    border: 4px dashed blue;
}

.mktoForm.copy2 {
    border: 4px dashed red;
}
.mktoForm {
		margin: 20px;
		padding: 20px;
		border: 1px solid gray;
		border-radius: 6px;
	  	background-color: beige;
}