Re: Marketo forms in Kentico CMS

swarnich2 · ‎08-05-2021

We're in the process of implementing Marketo, but we can’t get the forms to work with our CMS (Kentico).

It just does not show up (test URL: https://www.bdo.dk/da-dk/services/moms/told/test-3 ). I have a suspicion that it is because the Marketo form becomes nested, but I’m not sure.

Has anyone had any luck with using Marketo forms in Kentico and if so, how did you make it work? And is it a problem with the CMS that can be fixed by developers?

adrianfraguela · ‎08-05-2021

It doesn't look like you have an HTML container for the form to live in. You need to add this line:

<form id="mktoForm_1004"></form>

In Marketo you can pull the embed code which would give you something like this:

<script src="//462-YQN-293.mktoweb.com/js/forms2/js/forms2.min.js" type="text/javascript"></script>
<form id="mktoForm_1004"></form>
<script type="text/javascript">MktoForms2.loadForm("//462-YQN-293.mktoweb.com", "462-YQN-293", 1004);</script>

SanfordWhiteman · ‎08-05-2021

It doesn't look like you have an HTML container for the form to live in.

Not exactly (unless the page has changed since you posted). The <form> element does exist in the initial HTML.

However, it’s inside another form, which is not allowed, so it will not be rendered.

There’s a giant form that wraps the entire body:

<body class="LTR Firefox DADK ContentBody" >
    <form method="post" action="/da-dk/services/moms/told/test-3" onsubmit="javascript&colon;return WebForm_OnSubmit();" id="form">

swarnich2 · ‎08-06-2021

Thank you both - much appreciated.

@SanfordWhiteman , your explanation is what I suspected. Any ideas to solving it (other than changing CMS)?

SanfordWhiteman · ‎08-06-2021

Only thing that comes to mind is moving the Marketo <form> outside the big Kentico <form> using JS so it’ll render, then absolute-positioning it in the place you want.

swarnich2 · ‎08-12-2021

I got it to work with a script like the one below (just in case someone finds this in a Google search).

<script src="XXXXXXXXXX/js/forms2/js/forms2.min.js" type="text/javascript"></script>
<script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script>
		 
<div class="form-wrapper">
<div class="marketoForm" id="mktoForm">&nbsp;</div>
</div>
		
<script>
	 
	 MktoForms2.loadForm("//XXXXXXXXX", "XXXXXXXXXX", 1161, function (form) {

 	MktoForms2.$("#mktoForm").append(form.getFormElem());
  });
            MktoForms2.whenReady(function (form) {
				$('.mktoButton')[0].style.marginTop = '20px'
	  
                $(".mktoButton")[0].style.marginTop = "20px";
                var formEl = form.getFormElem()[0];
                var emailEl = formEl.querySelector("#Email");
                var submitEl = formEl.querySelector("button[type='submit']");
                var formElId = form.getId();
                var submitButtonRow = formEl.querySelector(".mktoButtonRow");

                form.onValidate(function (builtInValidation) {
                        form.submittable(true);
                    });
                });
           
    $(function () {
       marketoForm.init();

    });
	
</script>

SanfordWhiteman · ‎08-12-2021

Hmm, that‘s still a <form> inside a <form>, which isn’t allowed.

I would be exceedingly wary of rolling that out without extensive testing in all possible browsers & combinations of form names & values, since each browser can make its own choice about what to do with a non-standard structure like this — including not posting one of the forms at all — and if they all made the same choice, that could still break things.

For example, take this markup:

<form id="form1">
  <input type="text" name="input1" value="value 1.1">
  <input type="text" name="input2" value="value 2">
  <input type="submit" name="submit" value="outerform">
  <form id="form2">
     <input type="text" name="input1" value="value 1.2">
     <input type="text" name="input3" value="value 3">
     <input type="submit" name="submit" value="innerform">
  </form>
⋖/form>

What do you think is posted to the server for the field input1 if you click the submit button with the value innerform?

The answer, in latest Chrome and Firefox for desktop, is both values are sent:

input1=value+1.1&input1=value+1.2

Hopefully you can see why that can be problematic!