Multi-Step Form Not Loading Externally Possible Cache

[shelliezollin]

Hi,

I recently created a multi-step form in Marketo that we embedded externally in our AEM (Adobe Experience Manager) web platform by adding three parameters into a fragment modal (form id, munchkin id, form url).

While our other forms display accurately, the multi-step seems to cache or is perhaps, not loading.

Wondering if you can see why this is happening and/or if there is an easy fix, @SanfordWhiteman?

The form shows up for a first visit and not a second, but then resolves over time and displays once again. If you switch browsers, you may or may not see the form display on the first visit. A hard refresh or using an incognito page, fixes the issue sometimes.

I can't tell if it's a loading issue, javascript conflict, css conflict (css is linked externally), etc.

Hoping you can take a look for us. 

Page with form > Click the Get Started button:

https://www.firstcitizens.com/commercial/expertise/hemp-business

We're afraid of losing leads.

First visit (form) and second visit or other browser (possibly cached - no form):

Script added to form via RTE:

<script>// <![CDATA[
var userConfig = {
buttons: {
   prev: {
     label: "Back",
     disabled: false
   },


   next: {
     label: "Next"
   }
},


requiredFields: [
   {
     name: "Email",
     message: "This field is required."
   },


   {
     name: "FirstName",
     message: "This field is required, too."
   }
]
};




/* --- NO NEED TO EDIT BELOW THIS LINE! --- */


MktoForms2.whenReady(function (form) {
var formEl = form.getFormElem()[0],
   arrayify = getSelection.call.bind([].slice);


var fieldRowStor = ".mktoForm > .mktoFormRow",
   buttonRowStor = ".mktoForm > .mktoButtonRow",
   buttonStor = ".mktoButtonRow .mktoButton",
   fsaatPrefix = "fsaat-",
   localFragmentAttr = "data-form-local-fragment";


var CSSOM_RULEPOS_FIRST = 0;


var fieldRows = formEl.querySelectorAll(fieldRowStor),
   submitButtonRow = formEl.querySelector(buttonRowStor),
   submitButton = submitButtonRow.querySelector(buttonStor);


userConfig.requiredFields
   .map(function (fieldDesc) {
     fieldDesc.label = formEl.querySelector("[for='" + fieldDesc.name + "']");
     fieldDesc.refEl = formEl.querySelector("[name='" + fieldDesc.name + "']");
     return fieldDesc;
   })
   .forEach(function (fieldDesc) {
     fieldDesc.label.parentNode.classList.add("mktoRequiredField");
   });


var dynableSheet = arrayify(document.styleSheets).filter(function (sheet) {
   return sheet.ownerNode.nodeName == "STYLE";
})[0];


arrayify(fieldRows).forEach(function (row, rowIdx) {
   var rowPos = {
     isFirst: rowIdx == 0,
     isLast: rowIdx == fieldRows.length - 1
   };


   // id each wrapper row in DOM order
   row.id = fsaatPrefix + rowIdx;


   var navButtonRow = rowPos.isLast
       ? submitButtonRow
       : submitButtonRow.cloneNode(true),
     newRowAxis = row.nextSibling,
     nextEnabled = !rowPos.isLast,
     prevEnabled = !rowPos.isFirst && !userConfig.buttons.prev.disabled,
     newButtonAxis,
     newButtonTmpl,
     navButtons = {};


   if (nextEnabled) {
     navButtons.next = navButtonRow.querySelector(buttonStor);
   }


   if (prevEnabled) {
     newButtonTmpl = newButtonAxis = navButtons.next || submitButton;
     navButtons.prev = newButtonTmpl.cloneNode();
   }


   Object.keys(navButtons).forEach(function (dir) {
     navButtons[dir].type = "button";
     navButtons[dir].setAttribute("data-dir", dir);
     navButtons[dir].innerHTML = userConfig.buttons[dir].label;
   });


   if (nextEnabled) {
     row.parentNode.insertBefore(navButtonRow, newRowAxis);
   }


   if (prevEnabled) {
     newButtonAxis.parentNode.insertBefore(navButtons.prev, newButtonAxis);
   }


   navButtonRow.addEventListener("click", function (e) {
     if (e.target.tagName == "BUTTON" && e.target.type == "button") {
       if (
         e.target.getAttribute("data-dir") == "next" &&
         !isCustomValid(true, row)
       ) {
         return;
       }
       fsaatSet(row, e.target.getAttribute("data-dir"));
     }
   });


   dynableSheet.insertRule(
     [
       ".mktoForm[" +
         localFragmentAttr +
         "='#" +
         row.id +
         "']" +
         " " +
         ".mktoFormRow#" +
         row.id +
         ",",
       ".mktoForm[" +
         localFragmentAttr +
         "='#" +
         row.id +
         "']" +
         " " +
         ".mktoFormRow#" +
         row.id +
         " + " +
         ".mktoButtonRow",
       "{ display: block; }"
     ].join(" "),
     CSSOM_RULEPOS_FIRST
   );
});


function fsaatSet(current, dir) {
   var FSAAT_DIR_PREV = "prev",
     FSAAT_DIR_NEXT = "next";


   var dir = dir || FSAAT_DIR_NEXT,
     currentIndex,
     newHash;


   if (current instanceof HTMLElement) {
     currentIndex = +current.id.split(fsaatPrefix)[1];
   } else if (!isNaN(current)) {
     currentIndex = current;
   } else {
     currentIndex = -1;
   }


   newHash =
     "#" +
     fsaatPrefix +
     (dir == FSAAT_DIR_NEXT ? ++currentIndex : --currentIndex);


   formEl.setAttribute(localFragmentAttr, newHash);
}


function isCustomValid(native, currentStep) {
   form.submittable(false);


   var currentStep = currentStep || formEl,
     currentValues = form.getValues();


   var currentUnfilled = userConfig.requiredFields.filter(function (
     fieldDesc
   ) {
     return (
       currentStep.contains(fieldDesc.refEl) &&
       (!currentValues[fieldDesc.name] ||
         (fieldDesc.refEl.type == "checkbox" &&
           currentValues[fieldDesc.name] == "no"))
     );
   });


   if (currentUnfilled.length) {
     form.showErrorMessage(
       currentUnfilled[0].message,
       MktoForms2.$(currentUnfilled[0].refEl)
     );
     return false;
   } else {
     form.submittable(true);
     return true;
   }
} 
form.onValidate(isCustomValid);
fsaatSet();
});
// ]]></script>

Appreciate your help!

[SanfordWhiteman]

Don’t put custom form behaviors JS inside a Rich Text area — it’ll end up being executed multiple times and is almost impossible to debug. Move that to an external <script> tag loaded right after the form embed code.