Level 4

Solved

Remove tha auto-generated forms2.css

28 replies
9289 views
Translate

I want to do my own style for forms2, not just add upon marketos default styles. But no matter what i do Marketo always adds the file called forms2.css.
I tried to remove it with a jQuery function:

$( document ).ready(function() {
$('#mktoForms2BaseStyle').remove();
$('#mktoForms2ThemeStyle').remove();
});

But it still apears.

Any suggestions?

Marketo

Kenny_ElkingtonAccepted solution

Level 10

Hey Rasmus,

I'd suggest using the whenReady callback instead, as it waits until the form is completely done loading likie this:

MktoForms2.whenReady( function(form){
$('#mktoForms2BaseStyle').remove();
$('#mktoForms2ThemeStyle').remove();
});

Conwaydev

Level 1

This is still an actual issue that would be awesome to include the possibility to opt out. Yes we can use client-side JS to remove these CSS files, but its still two requests for users (no matter how small) that are unnecessarily when removing. Would love to see an option in the loadForm method that had something like window.MktoForms2.loadForm(accountUrl, accountId, formId, callback, { ...options like disableStylesheets: true }) with a bit more configuration. Its a low level performance win.

Translate

A

Anonymous

Just add to footer next code

<div id="mktoForms2ThemeStyle" style="display:none"></div>

<div id="mktoForms2BaseStyle" style="display:none"></div>

This code will disable to load generated form2.css

Translate

A

Anonymous

Thank you all for your help.

In exploring the various methods discussed here I came up with a solution that is rather simple and unobtrusive and only @media query dependent. Since we are still only referring to labels, I used the media query already present in forms2.css ( @media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {} ) to trigger my following classes (hidden_1, hidden_2) to either (display: none;) or (display: inline;) depending on the view port.

Thanks you all for the numerous replies.

Team effort.

Translate

A

Anonymous

Thank You Rasmus,

That is what I wanted to know. It was starting to become clear to me that the only way I was going to achieve my objective was to use a lot of div.nth-child(n).

Translate

R

Rasmus_Bidstru1Author

Level 4

Just remember if you insert or remove a question, your order will mess up :-)

Translate

A

Anonymous

What I'm trying to achieve is not remove the form, but be able to control the markup of the form.
Currently, the nesting of div's used for layout is making that job for me a little difficult. attached is an image illustrating the issue.

Translate

A

Anonymous

We have heavily customized Forms 2.0 using Javascript (jQuery) to restructure the DOM to match our needs (in our case, formatting it to match the Bootstrap structure/markup).

Translate

A

Anonymous

I guess my question is the following:

where do you even access these files?

Translate

SanfordWhiteman

Level 10

where do you even access these files?

You don't edit forms2.css -- if that's what you're asking -- you override it just as you would with any default stylesheet.

Translate

A

Anonymous

Josh you can create two empty divs width IDs "mktoForms2ThemeStyle" and "mktoForms2BaseStyle":
<div id="mktoForms2BaseStyle">
<div id="mktoForms2ThemeStyle"></div>
</div>

In the Forms2.js is a simple condition on the availability of these ID anywhere on the page

Translate

A

Anonymous

So there's really no way to prevent loading of the stylesheets in the first place? Ultimately I would love to get rid of the two stylesheet requests marketo makes. Any other options?

Translate

A

Anonymous

I like Kenny's approach. Makes sense to use native form functionality provided by Marketo.

Translate

Kenny_ElkingtonAccepted solution

Level 10

Hey Rasmus,

I'd suggest using the whenReady callback instead, as it waits until the form is completely done loading likie this:

MktoForms2.whenReady( function(form){
$('#mktoForms2BaseStyle').remove();
$('#mktoForms2ThemeStyle').remove();
});

Translate

L

Liliana_Cheng1

Level 4

Hi @Kenny Elkington, our team is experiencing issues with this two years after this original thread was opened. Could you provide some more insight please?

One of our forms is still referencing the forms2.css stylesheet which is affecting how the form renders. We have been using this form for over one year and we've only just noticed the bug in the past week. Additionally, the bug only seems to affect 1 out of every handful of loads so it is inconsistent. We also tested using an older form using the same "Plain" theme, and we have not experienced any issues with that other form, which leads us to believe this is form-specific.

Marketo support initially told us that the styling error on our form is coming from our page, but as you can tell from the attached screenshot, the forms2.css stylesheet is clearly being referenced by the form itself and not our page. You can even see the comment in line 1 that says "This is used to test if the stylesheet has been loaded yet" so we think the form is supposed to stop referencing forms2.css once it has been loaded, but for whatever reason, it doesn't clear out properly.

Our main question is, how do we get this form to stop referencing forms2.css? And why does it seem like it only affects specific forms even if the themes are the same? Thank you!

Translate

SanfordWhiteman

Level 10

Just use the Destyle Marketo Form JS. It completely disables Forms 2.0 styles and stylesheets.

Translate

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO