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

Show previous replies
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 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
Level 4
March 3, 2016

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

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

Conwaydev
Conwaydev
Level 1
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.

Terms & ConditionsAccessibility statement

Loading footer...