SOLVED

Two Forms, One Page?

Go to solution
SanfordWhiteman
Level 10 - Community Moderator

Re: Two Forms, One Page?

I have no idea unless you supply an example URL (and opening a new thread is a good idea).

Anonymous
Not applicable

Re: Two Forms, One Page?

I tried adding this to a simple page with your code and it worked here http://www.thosedigitalthoughts.com/test-2.html

When I use my version and swap out the form ID's it doesnt work however http://www.thosedigitalthoughts.com/test.html

Is there something I am missing from within Marketo. I get an error in console that says "Subscriber '280-LNO-408' is not valid"

SanfordWhiteman
Level 10 - Community Moderator

Re: Two Forms, One Page?

(Assume you meant to respond to me, not Marcie.)

You aren't using the right pod ID for your instance.  Look in a form embed code on your instance and you'll see where you're hosted.

You can see the error in your browser's F12 Console. Always look there first:

pastedImage_0.png

Anonymous
Not applicable

Re: Two Forms, One Page?

Thanks! I located the Pod ID from embed code and its working.

http://www.thosedigitalthoughts.com/test.html

MartinZ1
Level 2

Re: Two Forms, One Page?

Hi thank you for your help - I have tried the code you had on this page: https://www.enghouseinteractive.com.au/microsoft-teams-contact-centre-copy-2/

 

I used raw HTML to input the first form:

<form class="mktoForm" data-formId="11546" data-formInstance="one"></form>
<form class="mktoForm" data-formId="6044" data-formInstance="one"></form>

and raw JS under it

/* config area - replace with your instance values */

var mktoFormConfig = {
podId : "//info.enghouseinteractive.com",
munchkinId : "547-FBA-390",
formIds : [11546, 6044]
};

/* ---- 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);

But it isn't showing up at all:

MartinZ1_0-1653008356261.png

Could you please let me know if I'm doing it correctly?

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Two Forms, One Page?

You'd need to add the JS b/w the script tags (<script> </script>)! You should also load the Mktoforms2 JS prior to using any of the Mktoforms2 functions.

<script>
// Add JS here
</script>

 

MartinZ1
Level 2

Re: Two Forms, One Page?

Thank you I have added the JS scripts, how exactly do I load the Mktoforms2 JS?

MartinZ1
Level 2

Re: Two Forms, One Page?

Thanks I have added the opening and closing tags to JS but the form still isn't showing.

MartinZ1_0-1653023910761.png

 

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Two Forms, One Page?

Go to the form in the Marketo > Form Actions > Embed Code > Copy over the first two lines starting from the <scrip> and ending with </script> - Check out the below snapshot -

Darshil_Shah1_0-1653029722596.png

Get the first couple of lines from the embed script dialog (highlighted below) and add it that above the <script> tag of the custom JS you added from the codepen.

Darshil_Shah1_1-1653029855105.png

Let us know if you still face any issues. 🙂