How to use form embeds on website without any Marketo CSS

[David_Beauchamp]

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?

[SanfordWhiteman]

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‌.

[David_Beauchamp]

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? 

[SanfordWhiteman]

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!

[David_Beauchamp]

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

[Jitendra_Vyas]

Going to vote for the idea.

[simonpithers]

thanks! I think this is a problem for lots of users.

When you say " disable the styles", how were you meaning? I was hoping you meant a method on the MktoForms2 object? but I can't find anything as such.

 

[SanfordWhiteman]

---

When you say " disable the styles", how were you meaning? I was hoping you meant a method on the MktoForms2 object? but I can't find anything as such.

---

Meaning using the code in this CodePen: MktoForms2 :: Destyle Marketo Form - v1.106

[simonpithers]

cool, thanks. yeh, that's what I did in the end just with different code, but wanted to check I wasn't doing something inappropriate 🙂

[Dave_Roberts]

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