Really, finally winning the Marketo Forms vs. Tracking Protection battle

[SanfordWhiteman]

⚠️ The custom config in this post is no longer necessary post-2021, as the Forms 2.0 library has been updated to load everything from your LP domain.

While you should be loading embedded forms from your Marketo LP domain, it turns out just changing the URL is not enough.

Using a non-Marketo-owned domain to load forms2.min.js and call loadForm() seems to avoid collateral damage from Tracking Protection (Firefox’s built-in feature or the equivalent plugin for another browser). The form will at least show up on the page if you do that.

But – I’m sure you will be dismayed to learn – the form still won’t post under TP! You also need to upload a file to Design Studio and add a tiny bit of JavaScript. Then and only then are you good to go.

First, download this file:

marketo-xdframe-relative.html

(Note: the Marketo Nation site gates files through an “Offsite Link” popup. So click above, then right-click the link + Save Link As. Make sure you get the .html file itself, and don’t end up with a snapshot of this blog post!)

Next, upload the file to your Design Studio. To be clear, you’re not creating an LP, you’re uploading the file as static HTML. This may not be something you’ve done before (you probably upload images, CSS, and PDFs) but Marketo actually supports any kind of file.

Screenshot after it’s been uploaded to Design Studio:

Then replace your embed code with this ever-so-slightly different version:

<script src="//pages.example.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_9999"></form>
<script>
 MktoForms2.setOptions({
 formXDPath : "/rs/123-ABC-456/images/marketo-xdframe-relative.html"
 });
 MktoForms2.loadForm("//pages.example.com", "123-ABC-456", 9999);
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Where:

• 123-ABC-456 represents your Munchkin ID
• pages.example.com represents your Marketo LP domain
• 9999 is o’course your form ID

A live demo (though all the code is above):

MktoForms2 :: XDFrame relative path for Tracking Protection

The why

Using your LP domain enables forms to show up. But there’s a special asset, only used upon submission, that will still be blocked by default. Naturally, this only reveals itself when you run end-to-end tests.

See, embedded forms use an IFRAME message relay (XDFrame) for cross-domain posts (there are other ways to do it, but they’re not as backward-compatible and the IFRAME method works fine + fast in all browsers, even back to IE8).

But the IFRAMEd document loads forms2.min.js from an absolute URL with your instance hostname, i.e. app-xxnn.marketo.com:

Oops! Tracking Protection ain’t gonna let that load, for the same reason it doesn’t like a Marketo domain in the main document. (You can’t avoid TP by using an IFRAME, that would be silly.)

As you can see, the replacement XDFrame file uses a relative URL (/js/forms2/js/forms2.min.js), so it loads from your Marketo LP domain like the rest of the assets. Presto! No marketo.com for TP to get all paranoid about.

NOTES

forms2.min.js inside the IFRAME is only necessary because of its bundled  jQuery library, specifically the MktoForms2.$.ajax wrapper method. While not technically necessary, using jQuery keeps parity with the Forms 2.0 API.

[Sophie_Kool2]

Hi Sanford,

This is great, thank you much! We're trying to implement the solution, but run into the problem that the form won't submit. The forms shows up now, but when hitting submit, it goes to 'please wait' and never actually submits. We've checked in Marketo, but the leads are not pulling in.

Any ideas why this is happening?

Thanks!
Sophie

[SanfordWhiteman]

Have to see your page, no way to know what you're missing otherwise.

[Nina_Butler]

We are also running into the problem that the form won't submit. The forms shows up now, but when hitting submit, it goes to 'please wait' and never actually submits.

We have a staging link we can share if that is helpful. Here is the code snippet

> <script src=“//engage.alyce.com/js/forms2/js/forms2.min.js”></script>
<form id=“mktoForm_1017"></form>
<script>
MktoForms2.setOptions({
formXDPath : “/rs/826-QSR-218/images/marketo-xdframe-relative.html”
});
MktoForms2.loadForm(“//engage.alyce.com”, “826-QSR-218”, 1017);
</script>

[SanfordWhiteman]

Pls highlight the code using the Syntax Highlighter, can't read it otherwise. 

I'll also need a link to your page.

Ensure that your uploaded file looks exactly like the source file: I've seen people do some kind of Save-as (instead of download) which mangles the file.

[Phi_Ngo]

<script src="//engage.alyce.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1017"></form>
<script>
MktoForms2.setOptions({
formXDPath : “/rs/826-QSR-218/images/marketo-xdframe-relative.html”
});
MktoForms2.loadForm(“//engage.alyce.com”, “826-QSR-218”, 1017);
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Hi Sanford. Replying on behalf of Nina.

Above is the code in syntax highlight.

The code lives here: https://alyceco.staging.wpengine.com/request-a-demo/

We can try to upload the file again.

Thanks in advance!

[Phi_Ngo]

We used file linked in the blog post here: https://nation.marketo.com/community/product_and_support/blog/2019/11/12/really-finally-winning-the-...  via Right click, and Save As.. per the instruction. We aren't able to download the file from the link.

[SanfordWhiteman]

You have curly quotes around the strings in your code. Those will never be valid in JavaScript, and the code in my blog post doesn't have them. However, in your actual page, you have the correct straight quotes. So you can't have actually copied-and-pasted that JS from your page! This kind of discrepancy makes debugging much, much harder.

Then looking at the marketo-xdframe-relative.html, it looks nothing like the actual file. Looks like you did Save-As from the browser's File menu and then uploaded a page from Marketo Nation to your instance:

Let me be clear again: you need the file marketo-xdframe-relative.html that's linked above. Marketo may rewrite the link to bounce off their redirection server (since it's an "offsite link") but you still need the original  .html file. Not the Marketo page!

[Phi_Ngo]

The quotes may be an artifact from copy and pasting from multiple editors. Will double check to make sure they're all consistent.

This is the error I am receiving when trying to download your file:

[SanfordWhiteman]

I imagine your browser is sending a referrer which is looking like a hotlink attempt. Copy the link, open it in a new tab.

[Phi_Ngo]

After uploading the new file into Marketo, and fixing the quote characters, form submission still doesn't work.

You can view the form on our production site here:

https://www.alyce.com/testing/