SOLVED

Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Go to solution
Kevin_Lustgarte
Level 3

Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Hello. There are several posts in Community about how to enable multiple forms to work on a single external web page. Our web developer is having difficulty using the 'solves' to get the forms to work. Here's what he told me he tried that's not working. (his notes to me)

Will take any advice you may have.

 

marketo-forms.PNG

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

You must include the library before it’s used. (Not a Marketo thing but always true of JS code.)

View solution in original post

11 REPLIES 11
SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Hi Kevin,

 

That’s a snippet from this blog post I wrote some time ago and you can see the demo code still works. So I couldn’t tell you anything else from just that screenshot. He evidently implemented the code incorrectly/incompletely.

Kevin_Lustgarte
Level 3

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

that definitely occurred to me!

Dominic_Dunbar
Level 1

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Below is the page code I used. The forms are not rendering.  Can you see what the issue might be?  Thanks in advance.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width" />
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:500&subset=latin" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300&subset=latin" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora&subset=latin" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:700&subset=latin" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway:500&subset=latin" rel="stylesheet" type="text/css">
<title>Form test</title>
<link href="" rel="stylesheet" type="text/css">
<style>
html {
scroll-behavior: smooth;
}
</style>

<script>
/* config area - replace with your instance values */

var mktoFormConfig = {
podId : "//app-sj06.marketo.com",
munchkinId : "857-YGR-659",
formIds : [3909, 3908]
};

/* ---- NO NEED TO TOUCH ANYTHING BELOW THIS LINE! ---- */

function mktoFormChain(config) {

/* util */
var arrayify = getSelection.call.bind([].slice);

/* const */
var MKTOFORM_ID_ATTRNAME = "data-formId";
 
/* fix inter-form label bug! */
MktoForms2.whenRendered(function(form) {
var formEl = form.getFormElem()[0],
rando = "_" + new Date().getTime() + Math.random();

arrayify(formEl.querySelectorAll("label[for]")).forEach(function(labelEl) {
var forEl = formEl.querySelector('[id="' + labelEl.htmlFor + '"]');
if (forEl) {
labelEl.htmlFor = forEl.id = forEl.id + rando;
}
});
});

/* chain, ensuring only one #mktoForm_nnn exists at a time */
arrayify(config.formIds).forEach(function(formId) {
var loadForm = MktoForms2.loadForm.bind(MktoForms2,config.podId,config.munchkinId,formId),
formEls = arrayify(document.querySelectorAll("[" + MKTOFORM_ID_ATTRNAME + '="' + formId + '"]'));

(function loadFormCb(formEls) {
var formEl = formEls.shift();
formEl.id = "mktoForm_" + formId;

loadForm(function(form) {
formEl.id = "";
if (formEls.length) {
loadFormCb(formEls);
}
});
})(formEls);
});
}

mktoFormChain(mktoFormConfig);


</script>

</head>

<body>
<div style="width: 80%;">
<form data-formId="3909" data-formInstance="one"></form>
<form data-formId="3908" data-formInstance="one"></form>
<form data-formId="3909" data-formInstance="two"></form>
</div>
</body>


SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Can you use the syntax highlighter so that's readable? Thanks. And please link to the real page where this is running.

Dominic_Dunbar
Level 1

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Thank you for your timely reply.  I am having issues creating the highlighted code.  I can give you the url of a page that I built that contains just the forms and nothing else.  Please take a look at the code from you browser and see if you can see where I went off course.

Form test (premera.com)

 

Thank yo so much for your time.

 

Dominic

SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

You aren't loading the forms library itself on that page.

SanfordWhiteman_0-1648232353198.png

 

Dominic_Dunbar
Level 1

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

Is the code below what is missing? I tried adding this to the page. But nothing happened. The forms are still not showing.

 

<script src="//go.premera.com/js/forms2/js/forms2.min.js"></script>

 
Apologies if these are basic knowledge questions.  I am not well versed in the ins and outs of Marketo coding.
 
D.
SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

You must include the library before it’s used. (Not a Marketo thing but always true of JS code.)

Dominic_Dunbar
Level 1

Re: Multiple Marketo Forms Not Displaying - Tried the Tricks But No Luck

I moved the script above the body tag.  Still no forms are showing. Am I missing something basic?

page url: Form test (premera.com)

 

Thanks again

 

D.