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

Remove tha auto-generated forms2.css

  • October 24, 2014
  • 15 replies
  • 9271 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

A
Anonymous
October 24, 2014
I don't believe there is a way to remove it; I simply use the plain style out of the box and then style using CSS and JS (I wrap the form fields in the Bootstrap structure and use its default styling first, then customize per client).
A
Anonymous
October 24, 2014
The issue you are seeing here is to do with the order of how things are loaded.

Since you are only removing the stylesheets, you would need this jQuery function to execute before the stylesheet is loaded. But in your current implementation, the stylesheet loads and then you remove the references to them with your jQuery function. 

One solution is to overwrite the styling after they are loaded. 

 
R
Rasmus_Bidstru1Author
Level 4
October 27, 2014
@Murtza, the marketo style, is it always loaded just before the inserted form?

So I can via jQuery overwrite the original styling instead of removing it, that will give a better result?

 
A
Anonymous
October 27, 2014
@Rasmus, please see the image below, which shows the load timeline for Marketo form assets. CSS loads last out of the form assets (html, js, css). One solution is to use "!important" in your css, so the css does not get overwritten by Marketo forms css. Another solution is to add inline styling to the DOM elements using JavaScript after document ready event. 



 
    R
    Rasmus_Bidstru1Author
    Level 4
    October 28, 2014
    Ah that makes sense... I found out that by using window.load, it will wait long enough for it to work

     $(window).load(function() {
          $('#mktoForms2BaseStyle').remove(); 
          $('#mktoForms2ThemeStyle').remove();
      });

    The issue with !important is that, if im using !important everywhere, and want to use Media querries, then its not possible to overwrite my already !important properties, with another !important :-) 
          
    Kenny_Elkington
    Adobe Employee
    Kenny_ElkingtonAdobe EmployeeAccepted solution
    Adobe Employee
    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
      Level 4
      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
      Level 10
      March 29, 2018

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

      A
      Anonymous
      October 28, 2014
      I like Kenny's approach. Makes sense to use native form functionality provided by Marketo.
      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
      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
      March 2, 2016

      I guess my question is the following:

      where do you even access these files?

      SanfordWhiteman
      SanfordWhiteman
      Level 10
      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.

      Show more replies
      Terms & ConditionsAccessibility statement

      Loading footer...