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

SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator

⚠️ 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.

31473
56
56 Comments
Rupak_Nepali
Level 1

Sanford Whiteman

Here is the uploaded file:
https://go2.*****.com//rs/727-TDV-465/images/marketo-xdframe-relative.html

Changed the embedded code:

<script src="//go2.*****.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1123"> </form>
<script>
MktoForms2.setOptions({
formXDPath: "/rs/****/images/marketo-xdframe-relative.html"
});
MktoForms2.loadForm("//go2.*****.com", "*****", 1123);
</script>

Here are my tests which loads the form in private firefox and submission looks good.

Test Marketo form for Firefox private | Axway 

---------

Questions:

1. There is an error in https://assets-dl.figureone.com/assets/marketo-xdframe-relative.html When I checked the code it is showing an error like below:


The file code has <script src="/js/forms2/js/forms2.min.js"></script> Do we need to upload the forms2.min.js file or not in the Marketo?
Interestingly, if we add https://go2.****com/js/forms2/js/forms2.min.js in the Marketo Forms 2 Cross-Domain Proxy Frame then the form will never load, so little confused.

----------

2. In the example

MktoForms2.setOptions({
     formXDPath: "/rs/*****/images/marketo-xdframe-relative.html"
});

is using the relative path for files and checking the code also in the comments it is saying to use relative path? Is that how the formXDPath path works?

FYI we are embedding the form code in different URLs, not in the Marketo LP. Please have a look and let us know if that is the right way.

Please let us know for any improvements as well.

SanfordWhiteman
Level 10 - Community Moderator
1. There is an error in https://assets-dl.figureone.com/assets/marketo-xdframe-relative.html When I checked the code it is showing an error like below:

Of course there's an error if you try to open the page from the CDN download server!  It could never, ever work in this way. And it literally says, right in your screenshot, "It should not be accessed directly."

You download the marketo-xdframe-relative.html file from the CDN and upload it to your Design Studio. No testing can be performed until it's in the right place.

the file code has <script src="/js/forms2/js/forms2.min.js"></script> Do we need to upload the forms2.min.js file or not in the Marketo?

No, you do not need to upload or touch any files at all, other than marketo-xdframe-relative.html.

Interestingly, if we add https://go2.axway.com/js/forms2/js/forms2.min.js in the Marketo Forms 2 Cross-Domain Proxy Frame then the form will never load, so little confused.

No, do not make any changes to the marketo-xdframe-relative.html. Upload it exactly as provided.

You're adding steps that aren't in the instructions... I didn't leave anything out, so please follow exactly as stated, or you'll create confusion for other users as well.

 In the example
MktoForms2.setOptions({
     formXDPath: "/rs/727-TDV-465/images/marketo-xdframe-relative.html"
});

is using the relative path for files and checking the code also in the comments it is saying to use relative path? Is that how the formXDPath path works?

I don't understand the question, but the architecture is simple:

  • Upload the custom marketo-xdframe-relative.html I provided into Design Studio. Do not make any changes to the file.
  • Config the embed code so the Forms 2.0 library uses the custom file in Design Studio, instead of its default file.
Mark_Knight
Level 3

Many thanks Sanford Whiteman‌ for this post and for reaching out to me after liking a previous post that was out of date.

One more point to add one more item on your implementation list though.

- Make sure you clear your CDN cache if you are repeatedly testing the same page once you have implemented this fix...

I find it incredible that we need to fix forms and can no longer rely on the embed code Marketo generates

- Why are Marketo not fixing this issue for any new forms / embed codes generated?? 

I hope Marketo give you some level of kick-back for doing their job for them...

Mark_Knight
Level 3

Perfect fix and implementation guidance for the issue of Firefox not displaying embedded forms

SanfordWhiteman
Level 10 - Community Moderator
I find it incredible that we need to fix forms and can no longer rely on the embed code Marketo generates

- Why are Marketo not fixing this issue for any new forms / embed codes generated??

Thing is, it won't help on a secure website unless you also have SSL on your LP domain and/or alias.

So although I agree the default xdframe should be modified (no-brainer), there's a touchy situation at the heart of it. Charging for SSL has long been a cash cow, and Marketo has probably been instructed to keep charging for it.*

So if every customer, old and new, won't opt into SSL due to the cost, it's impossible to do a general fix.

I hope Marketo give you some level of kick-back...

Haha, would be nice, but no.

* In technical fact, everyone could get Let's Encrypt certs, free to both parties. True, LE certs are incompatible with a lot of older custom software. But since we're talking about Landing Pages, every browser worth caring about -- including IE 8 -- supports them. Also, in 10m you can set up a nearly-free, SSL-enabled proxy for forms on AWS CloudFront or another CDN. But still, everyone would have to be doing it.

Anil_Kapoor
Level 1

Sanford Whiteman

Do you not think this solution is a complete hack and not maintainable? Are you trying to make an XDFrame code copy in every client's account? What happens if Marketo will update their code in the XDFrame file, and maybe there is a possibility that the form breaks for everyone who had implemented this workaround.

I have checked many more websites that are using Marketo, and their embedded forms are not working in Firefox private browsing, and they are not aware of this. We should approach Marketo support and force them to resolve it as a permanent solution, Instead of adding this hack in individuals' accounts. This error is a critical error that impacting all of Marketo's client visitors.

SanfordWhiteman
Level 10 - Community Moderator

It's fine to use and Marketo is aware of it (I have publishing privileges on the blog b/c of solutions like this).

Wouldn't worry any more about it spontaneously breaking than anything else -- for years upon years the forms lib has worked the same way. There are people (I don't advise this, but it's been done) who even self-host the core JS.

Of course it would be far better if built-in, but there are lots of semi-demi-official client-side hacks that are safe to use (and are used on Fortune 100 sites, fwiw). The key is to stay in the know.

Merrisa_Brown
Level 2

Thanks for this, Sanford Whiteman‌. Your directions were easy to follow and we were able to implement this on our site! 

Thank you, Sanford Whiteman‌. Great advice and instructions as usual

Michael_Sogunro
Level 2

FormMKTO.JPGUgh. I followed the directions and still cannot get the form to submit. 

I clicked the link for the file and right clicked on the pop-up warning me that I am being directed to another site. I "saved link as" the file in the pop-up and uploaded it to my design studio. 

I then replaced the url in the form embed code with:

/rs/432-UWH-935/images/marketo-xdframe-relative.html

Below is the complete, updated embed code.

<script src="//page.uschamber.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2155"></form>
<script>
MktoForms2.setOptions({
formXDPath : "/rs/432-UWH-935/images/marketo-xdframe-relative.html"
});
MktoForms2.loadForm("//page.uschamber.com", "462-UWH-935", 2155);
</script>

Before adding the bit below the forms appear and submit in all browsers except in a FireFox Incognito window. 

MktoForms2.setOptions({
formXDPath : "/rs/432-UWH-935/images/marketo-xdframe-relative.html"
});

After adding the bit above the form appears, but does not submit on any browsers. 

Here is where I am testing. 

iFrame Test | U.S. Chamber of Commerce 

Any help would be greatly appreciated.