Embedding marketo form with our branded look and feel on another website

There’s no way to provide the basic form embed, even with extensive Custom CSS, in a way that can guarantee your look and feel won’t be overridden by local styles on the site hosting the form.

A few CSS !important rules in the site’s existing CSS, or simply styles you left at defaults but they didn’t, and your form could look very different.

There are 2 ways to protect against this, in increasing order of complexity but also increasing order of desirability:

(1) give them JS that injects an IFRAMEd page on your site with the embed code on it, rather than giving them the embed code directly

(2) give them JS that moves the form out of the so-called light DOM, so the 3rd-party page styles will never affect the Marketo form

Both of these require custom JS.

The IFRAME method (1) requires code to fix the natural problems with attribution that happen when your form is inside an IFRAME: the UTMs need to be forwarded to the child window, Thank You page redirect needs to be done at the parent window, etc. This code is pretty easy to write. But it doesn’t solve the lingering problems of IFRAMEs w/responsiveness and so I’d use it only if I couldn’t accomplish (2).

The DOM method (2) is far trickier to write. It also requires that you reimplement the Marketo form’s error handling in JS (this is an artifact of using the shadow DOM, which can’t be understood by the native error handler). This not so fun, but quite surmountable if you have an experienced dev.