Solution to Embedded Marketo Forms Not Showing Up in Firefox

You are here because you have entered the code Marketo provided you with:

This image is taken from the original Marketo article

and found that your forms are not showing up in Firefox. Considering that Firefox has 13.29% of market share as of January 2017, that would probably mean you are losing 13.29% of your leads…

Why does this happen?

Tracking Protection in Firefox keeps users from being tracked by third-party services. Firefox consults the disconnect.me block list to decide which scripts to block, and unsurprisingly, marketo.com and marketo.net are on this list. Even though their form code does not track anything, other Marketo parts do.

By default, Tracking Protection is set to ‘Only in private windows’, so one can expect that only users in private browsing mode should be affected. However, the problem is also reported by users who do not use private browsing. It turns out that these users have the ‘Never remember history’ option enabled — which technically puts Firefox in private browsing mode — and thus, enables tracking protection as well.

Solution from Marketo

Marketo documentation says that you should use non-Marketo forms in this case, but the catch is that form submission still fails with the following error in the console:

The resource at “http://app-sjint.marketo.com/index.php/leadCapture/save2” was blocked because tracking protection is enabled. [Learn More]

Solution with CNAME

This solution is the first suggestion that Google has for you today, and if your site is HTTP-only, read no further. You can create a CNAME alias for your Marketo subdomain like:

marketo.darwinapps.com. 14400 IN CNAME app-sjint.marketo.com.

and then include Marketo scripts from your subdomain, eg:

<script src="//marketo.darwinapps.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234"></form>
<script>MktoForms2.loadForm("//marketo.darwinapps.com", "XXX-XXX-XXX", 1234);</script>

Please note: app-sjint.marketo.com is an example domain, and as you will certainly have a different one, please consult your integration code for the exact domain name.

If you have an HTTPS version of your site (and it’s a 77% chance that you do), the form won’t show up because of an SSL certificate mismatch. Technically, marketo.darwinapps.com points to a Marketo’s server, which will serve the SSL certificate for app-sjint.marketo.com, but not for marketo.darwinapps.com.

A Solution that Works

What we at DarwinApps do is proxy the form’s code using Apache’s mod_proxy and mod_rewrite. And, while mod_rewrite is usually enabled, you should double check if mod_proxy is enabled on your host. You should put the following section into your .htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^js/forms2/(.*) http://app-sjint.marketo.com/js/forms2/$1 [P,L]
RewriteRule ^form/getForm http://app-sjint.marketo.com/form/getForm [P,L]
RewriteRule ^form/getKnownLead http://app-sjint.marketo.com/form/getKnownLead [P,L]
RewriteRule ^index.php/leadCapture/save2 http://app-sjint.marketo.com/index.php/leadCapture/save2 [P,L]
</IfModule>

Then just replace app-sjint.marketo.com in your integration code with your domain, eg:

<script src="//darwinapps.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234"></form>
<script>MktoForms2.loadForm("//darwinapps.com", "XXX-XXX-XXX", 1234);</script>

This way, your requests to the form’s API will be proxied through your server, and for this very reason you will probably lose some cookies attached by Marketo to the visitor.

While it does make sense for users who are in private browsing mode, we’d better not lose this information for the rest of the visitors. The ideal strategy here is to try to use the original code directly from app-sjint.marketo.com, and only if it is blocked, to fallback to the proxied version. Here is the loadMktoForm() function which does exactly that:

<script type="text/javascript">
function loadMktoForm(rootUrl, altRootUrl, munchkinId, formId) {
    var insertScript = function insertScript(src, onload, onerror) {
        var s = document.createElement('script');
        s.onload = onload;
        s.onerror = onerror;
        s.setAttribute('type', 'text/javascript');
        s.setAttribute('src', src);
        document.getElementsByTagName('body')[0].appendChild(s);
    }
    insertScript(rootUrl + '/js/forms2/js/forms2.min.js', function () {
        MktoForms2.loadForm(rootUrl, munchkinId, formId);
    }, function () {
        insertScript(altRootUrl + '/js/forms2/js/forms2.min.js', function () {
            MktoForms2.loadForm(altRootUrl, munchkinId, formId);
        });
    });
}
loadMktoForm('//app-sjint.marketo.com', '//darwinapps.com', 'XXX-XXX-XXX', 1234);
</script>

The first argument is from your original MktoForms2.loadForm() call and the second argument is the fallback URL — your domain or alias to it (if you have one). The third argument is your Marketo ID, and fourth is form Id, as in the original MktoForms2.loadForm() call.

Enjoy!

P.S. When using this code, you can safely defer loading Marketo form code and receive a small improvement in your page loading score by adding the following code into insertScript() function after s.setAttribute(‘src’, src):

s.setAttribute('defer', 'defer');

DarwinApps