Remove tha auto-generated forms2.css | Community
Skip to main content
R
Rasmus_Bidstru1
New Participant
October 24, 2014
Solved

Remove tha auto-generated forms2.css

  • October 24, 2014
  • 15 replies
  • 9268 views
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? 
Best answer by Kenny_Elkington

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();
});

15 replies

Conwaydev
Conwaydev
New Participant
January 9, 2025

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.

A
Anonymous
August 3, 2018

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

A
Anonymous
March 4, 2016

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.

A
Anonymous
March 3, 2016

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

R
Rasmus_Bidstru1Author
New Participant
March 3, 2016

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

A
Anonymous
March 3, 2016

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.

A
Anonymous
March 3, 2016

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

A
Anonymous
March 2, 2016

I guess my question is the following:

where do you even access these files?

SanfordWhiteman
SanfordWhiteman
New Participant
March 2, 2016

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.

A
Anonymous
March 6, 2015
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
A
Anonymous
November 4, 2014
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?
A
Anonymous
October 28, 2014
I like Kenny's approach. Makes sense to use native form functionality provided by Marketo.
Kenny_Elkington
Kenny_ElkingtonAccepted solution
New Participant
October 28, 2014

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();
});

    L
    Liliana_Cheng1
    New Participant
    March 29, 2018

    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!

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    March 29, 2018

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

    Show more replies
    Terms & ConditionsAccessibility statement

    Loading footer...