How to use form embeds on website without any Marketo CSS

Highlighted

How to use form embeds on website without any Marketo CSS

I know this question has been asked before a few times, and each time the style removal hack was commented by Sanford Whiteman. I don't see how that is a good solution for this problem. It's a work around that offers a bad user experience. I would like to request that Marketo offers an option when creating forms to allow for no styles to be attached/injected along with that particular form ID.

The problem is that we want to embed marketo forms onto our sites and have the option to be able to style the forms ourselves. To do this right now the only solution has been to let Marketo inject all the style tags and inline styles into our site(there is no way to stop this) and then run some javascript to remove/disable the styles so that our own styles can work. There are multiple style tags injected to the document head and multiple inline styles injected to the form. This is a bad user experience to wait for Marketo style injection on page load, and then some more style flickering occurs when we run our own javascript to remove those styles. Can Marketo add an option into the form editor to allow for no styles?

Tags (2)
7 REPLIES 7
Highlighted

Re: How to use form embeds on website without any Marketo CSS

that offers a bad user experience.

The end user need not ever see the original styles. Simply hide the form element, wait for the form to trigger whenReady, disable the styles, then unhide it. There's no flicker.

As for the delay to load assets you'll just be disabling, sure, be better to do without it. But this should be in Ideas‌.

Highlighted

Re: How to use form embeds on website without any Marketo CSS

The hiding and unhiding is just another band aid on the problem. Can we talk about how this can be fixed without having to add all these hacks to get around these styles? 

Highlighted

Re: How to use form embeds on website without any Marketo CSS

If I were a full-time Marketo employee, yes... but for now the better place is to open an Ideas and I'll upvote it!

Highlighted

Re: How to use form embeds on website without any Marketo CSS

Thanks for the feedback Sanford. I've created an idea here.

Highlighted

Re: How to use form embeds on website without any Marketo CSS

Going to vote for the idea.

Level 6

Re: How to use form embeds on website without any Marketo CSS

I like the idea of having some kind of toggle that'd include (or not) the forms.css file automatically. 

I supposed it'd still fall under the "workaround the styles" part you already mentioned, but another way to go about this is to just use CSS to override the styles. Generally, you're going to need a stylesheet to address the styles for each different field type anyway, the only real difference here is that you've got to target the elements on the form the same way (or more specifically) that Marketo does to override the styling. Once you've kinda got the "scaffolding" (the group of selectors that Marketo uses to style the forms which can be harvested from the stylesheet in your browser's inspector) that's appropriate for Marketo form selectors, you can continue to use that for other forms to override the styles. In most cases that I've seen, Marketo's CSS (selectors) are more specific than other CMS's selectors (ex. form.mktoForm {...} vs. form {...} ) and should override most of your website's CSS. 

Here's a link to some more info on a basic CSS scaffold that's got most of the selectors written out for reference with some inline comments to help make sense of it all: https://nation.marketo.com/message/213274-fluid-responsive-marketo-form-css 

Highlighted

Re: How to use form embeds on website without any Marketo CSS

Dave Roberts‌ what Im asking for here is to make the process of using Marketo forms on my website anything but an difficult process with extra unnecessary steps. We want to get forms working on our websites and we dont want to have to spend a bunch of time on removing styles in order to add our own styles. What you are proposing is what Ive already tried before. I spent a few hours trying to remove all Marketo CSS before finding the Javascript version of removing the Marketo styles(I linked that above). Trying to override all of the Marketo CSS was an absolute nightmare. The way Marketo nests elements and adds incredibly specific classes and inline styles makes it so I would almost have to use !important on every style override. And then what happens if Marketo updates any of these styles in the future, we would have some new styles introduced on our site without warning and would have to overrides those as well. If Marketo could just give us an option to use the forms without any Marketo styles then this process would be so easy to embed the form and add our styles.