Remove tha auto-generated forms2.css

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

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



 

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

 

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. 

 

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