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

[jengcalendly]

Hi!  We have stylized our marketo forms so when they are embedded on our website they have our brand css styling applied. I now need to provide a vendor with our marketo form embed code and provide the styling in that form so it will render prettier than they do out of the box.

Possible or not? TYIA

[SanfordWhiteman]

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.