Multi-Step Form Not Loading Externally Possible Cache
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!