Is there a way to complete strip css from Form2.0?

[Anonymous]

Form 2.0 comes with several themes but none of them matches or work well with our brand. When I use the embedding code to load a form to a page, it loads the style from Marketo as well. Because there is not a barebone theme for Form 2.0, I wonder if there is a quick and easy way to strip all the style that comes with the form leaving designers and developers more feedom to match Form 2.0 to their own branding.

[Anonymous]

I beleive this is a requested feature, I would check the ideas section and upvote! - Jeff

[Anonymous]

A solution I have used is to add another class + remove any inline styling via jQuery.

$(document).ready(function(){
$('form.mktoForm').find('*').andSelf().toggleClass('myoverrideClass').removeAttr("style"); 

});

Then use the .myoverrideClass to help override any css from the theme.

For preview and debugging purposes you can strip all the classes and style attributes on page load with jQuery also.

Paste the below in the browser console.

$('form.mktoForm').find('*').andSelf().removeClass().addClass('.myoverrideClass').removeAttr("style");

This will strip all classes and inline styling from the marketo form. 

But leave the .myoverrideClass active

[Anonymous]

Hi Haven Ramos, 

Your solution works well. The only problem is some times your script gets executed before the form is fully loaded to the page (ie. the DOM isn't ready), therefore

$('form.mktoForm').find('*')

has nothing to execute against. 

If the form is loaded to the page using the JS embedding code, I can set a call back to run the strip function after the DOM is ready, but if the form is added to the landing page in Design Studeo via drag and drop, there is no way I create a fall back function to make sure the strip function is executed after the DOM is in place.

What's your take on that?

[Anonymous]

Hi Desmond,

You can try nesting the jquery code into a setTimeout method

$(document).ready(function(){

setTimeout(function(){

$('form.mktoForm').find('*').andSelf().toggleClass('myoverrideClass').removeAttr("style");

},3000);

});

It is not ideal but will provide some time for the form to finish loading.