Solved
Marketo Form onSuccess never fires
I have the following code to place a form. When I fill out all the fields and submit it, I see the 'Submitting...' in the console log, but that is it. I never see 'Submitted' and there are no errors in the console.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="by-marketo">
<form id="mktoForm_12695"></form>
</div>
<script>
const marketoFormsScriptTag = document.createElement('script');
marketoFormsScriptTag.src="https://now.EXAMPLE.com/js/forms2/js/forms2.min.js";
marketoFormsScriptTag.setAttribute('charset', 'utf-8');
marketoFormsScriptTag.onload = function () {
window.MktoForms2.loadForm("//now.EXAMPLE.com", "XXX-XXX-XXX", 12695, function (form) {
console.log('Element', form.getFormElem());
//MktoForms2.lightbox(form).show();
form.onSubmit(function () {
console.log('Submitting...', form);
}).onSuccess(function (values, followUpUrl) {
console.log('Submitted');
form.getFormElem().hide();
form.getFormElem().parent().html('<div class="by-marketo-form-confirmation"><p>Thank you for getting in touch! We appreciate you contacting us and we will respond within two business days with more information.</p></div>');
return false;
});
});
}
document.head.appendChild(marketoFormsScriptTag);
</script>
</body>
</html>
As far as how I generating the script tag, that is because this will eventually be in a Vue.js app. I pulled it out in a standalone page to make sure that nothing Vue.js was conflicting with it, but I get the same behavior.
Ideas?