Stacked Form Thank You Message
I'm working on a landing page where we have the forms replacing on page. I've done form replacing/stacking before and have that part working but I'm struggling getting the forms to show a thank you message on final success rather than forwarding to a new page.
The page I'm working on is here: https://go.schedulinginstitute.com/hpp-Forms.html and it still has the hidden thank you message on it but it now just forwards to the thank you page (in case I can't get the thank you message to work).
Typically I use this code to replace a form with HTML:
<script src="//app-ab14.marketo.com/js/forms2/js/forms2.js"></script>
<script>
MktoForms2.whenReady(function (form){
form.onSuccess(function(values, followUpUrl){
form.getFormElem().hide();
document.getElementById('confirmText').style.visibility = 'visible';
return false;
});
});
</script>
I tried to marry that with the stack/replace code to get this:
<script>
// config section - customize for your org
var config = {
instanceHost: "//app-ab14.marketo.com",
munchkinId: "090-EZX-133",
formidStack: [7527, 7528, 7529, 7530],
onFinalSuccess: function(vals, thankYouURL) {
form.getFormElem().hide();
document.getElementById('confirmText').style.visibility = 'visible';
return false;
},
insertInsideSelector: "#primaryForm2"
/* insertBeforeSelector : null */
}
/* --- NO NEED TO TOUCH ANYTHING BELOW THIS LINE */
// utility fns
var injectMktoForm = function(parentEl, insertBeforeEl, instanceHost, munchkinId, formid, onReady) {
var formEl = document.createElement('FORM');
formEl.id = 'mktoForm_' + formid;
try {
parentEl.insertBefore(formEl, insertBeforeEl)
} catch (e) {
parentEl.appendChild(formEl)
}
MktoForms2.loadForm.apply(MktoForms2, Array.prototype.slice.apply(arguments, [2]));
}
var ejectElement = function(formEl) {
formEl.parentNode.removeChild(formEl);
}
var arrayPushGet = function(ary, pushable) {
return ary[ary.push(pushable) - 1];
}
// allow runtime override of starting form ID
var startFormId = +document.location.hash.substring(1),
startFormIndex = Math.max(config.formidStack.indexOf(startFormId),0);
config.formidStack = config.formidStack.slice(startFormIndex);
// main work
var formParentEl = document.querySelector(config.insertInsideSelector) || document.body,
formEl = formParentEl.querySelector(config.insertBeforeSelector) || null,
formidInitialCount = config.formidStack.length,
formElStack = [],
formid;
var nextForm = function(values, thankYouURL) {
if (formid = config.formidStack.shift()) {
injectMktoForm(formParentEl, formEl, config.instanceHost, config.munchkinId, formid,
function(form) {
if (formEl) {
// nothing to eject on initial run
ejectElement(formElStack.shift());
form.addHiddenFields({
Email: values.Email
});
}
formEl = arrayPushGet(formElStack, form.getFormElem()[0]);
formParentEl = formEl.parentNode;
var progressEl = document.createElement('PROGRESS');
if (progressEl) {
progressEl.style.width = '100%';
progressEl.setAttribute('max', formidInitialCount);
progressEl.setAttribute('value', formidInitialCount - config.formidStack.length);
formEl.insertBefore(progressEl, formEl.firstChild);
}
form.onSuccess(config.formidStack.length ? nextForm : config.onFinalSuccess);
});
// don't forward to ThankYouURL
return false;
}
}
nextForm(); // first call will initialize
</script>
But it just gets stuck on the last form and never shows the message or hides the form. Here's where I've been testing the code to replace the form with the thank you message: https://go.schedulinginstitute.com/hiddenpracticeprofitscom-Forms-Test.html
Any advice or help anyone can give is greatly appreciated!
Thanks!