Is there a way to complete strip css from Form2.0? | Community
Skip to main content
A
Anonymous
April 10, 2014
Question

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

  • April 10, 2014
  • 4 replies
  • 1354 views
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.
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    4 replies

    A
    Anonymous
    April 10, 2014
    I beleive this is a requested feature, I would check the ideas section and upvote! - Jeff
    A
    Anonymous
    April 14, 2014
    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

    A
    Anonymous
    April 15, 2014
    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?
    A
    Anonymous
    April 15, 2014
    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.

     
    Terms & ConditionsAccessibility statement

    Loading footer...