Stacked Form Thank You Message

[Samantha_Cossum]

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!