Hi Sanford Whiteman,
I am trying to use the sample code that you provided above to capture information from a non-Marketo form and I'm having some issues. Simply collecting the information works but I am trying to make the form "progressive" as I am only displaying one question at a time and using the "onclick" function to hide/display questions. The issue is that every time the first question is answered it triggers the form submit action. Below is the code that I'm currently using - I'm hoping you could help me out with this. Thanks ahead of time.
<script>
var notes, phone, company, Email;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
notes = _("html_MktoCompanyNotes").value;
if(notes.length > 0){
_("phase1").style.display = "none";
_("phase2").style.display = "block";
} else {
alert("Please answer all questions");
}
}
function processPhase2(){
Email = _("html_Email").value;
if(Email.length > 5){
_("phase2").style.display = "none";
_("phase3").style.display = "block";
} else {
alert("Please answer all questions");
}
}
</script>
<form id="htmlForm">
<div id="phase1">
I hire roughly ___________ people annually.
<br />
<br>
<div align="left" style="margin:15px;"><button onclick="processPhase1()" class="eld" id="html_MktoCompanyNotes" value="0-49 employees">0-49</button></div><div align="center" style="margin:15px;"><button onclick="processPhase1()" class="eld" id="html_MktoCompanyNotes" value="50-99 employees">50-99</button></div><div align="right" style="margin:15px;"><button onclick="processPhase1()" class="eld" id="html_MktoCompanyNotes" value="100+ employees">100+</button></div>
</div>
<div id="phase2">
<input name="Email" id="html_Email" maxlength="255" type="email" placeholder="Email">
<button type="submit" class="eld">Submit</button>
</div>
</form>
<form id="mktoForm_1245" class="mktoForm"></form>
<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>var config = {
mktoForm: {
instanceURL: "//app-ab10.marketo.com",
munchkinId: "xxx-xxx-xxx",
formId: xxx
},
htmlForm: {
cssSelector: "#htmlForm"
}
};
/* ---- NO NEED TO EDIT BELOW THIS LINE! ---- */
(function(config) {
MktoForms2.loadForm(
config.mktoForm.instanceURL,
config.mktoForm.munchkinId,
config.mktoForm.formId
);
MktoForms2.whenReady(function(mktoForm) {
/* naive Array.from ponyfill */
var _from = Function.prototype.call.bind(Array.prototype.slice);
document
.querySelector(config.htmlForm.cssSelector)
.addEventListener("submit", function(htmlSubmitEvent) {
var htmlFormEl = this,
fields = {
textLike: htmlFormEl.querySelectorAll(
'input:not([type="radio"]):not([type="checkbox"]),textarea'
),
checkable: htmlFormEl.querySelectorAll(
'input[type="radio"],input[type="checkbox"]'
)
},
mktoObj = {};
// text-like fields: just copy value
_from(fields.textLike).forEach(function(fieldEl) {
mktoObj[fieldEl.name] = fieldEl.value;
});
// checkbox, checkboxes, and radios
// if single input w/current name, treat as Marketo checkbox type (yes/no)
// if multiple inputs, create value array and only append if currently checked
_from(fields.checkable).forEach(function(fieldEl) {
var hasSiblingFields =
_from(fields.checkable).some(function(siblingEl) {
return (siblingEl != fieldEl) && (siblingEl.name == fieldEl.name);
});
if (!hasSiblingFields) {
mktoObj[fieldEl.name] = fieldEl.checked ? "yes" : "no";
} else if (fieldEl.checked) {
mktoObj[fieldEl.name] = mktoObj[fieldEl.name] || [];
mktoObj[fieldEl.name].push(fieldEl.value);
} else {
mktoObj[fieldEl.name] = mktoObj[fieldEl.name] || null;
}
});
// join any arrays with semicolons
Object.keys(mktoObj).forEach(function(fieldName) {
if (Array.isArray(mktoObj[fieldName])) {
mktoObj[fieldName] = mktoObj[fieldName].join(";");
}
});
// stop native HTML submit, switch to Marketo submit
htmlSubmitEvent.preventDefault();
mktoForm.addHiddenFields(mktoObj);
mktoForm.submit();
});
});
})(config);</script>
.png)