Marketo Form CSS – How To Remove and Override It

The Marketo Form CSS Problem

As many marketing automation engineers will atest to, whilst Marketo is a great tool for streamlining the nurture, acqusition and remarketing cycles, there are some areas especially from a design perspective that leave a little to be desired.

The mainstay of any landing page to capture potential lead information, be that linear or via progressive profiling, is a form for data capture. That’s great if you’re happy with the standard elements and CSS provided by Marketo, you may even have tried to override the standard CSS that Marketo implements and applies to the forms with varying success. My guess is that if you’re here reading this post, you are looking for a straightforward method to remove some of the extra bloat that Marketo adds to its standard forms.

Standard Marketo Form CSS

Take a quick look below and you will see a plethora of both inline CSS and classes applied to both the form, form elements and labels including the submit button. If you’re looking at creating a responsive landing page form (and why wouldn’t you be in this day and age), you’ll be wanting the markup as clean and crisp as possible so as to have as few as few as possible issues when you pass over for testing or quality assurance.

<form style="font-family: Helvetica,Arial,sans-serif; font-size: 13px; color: rgb(51, 51, 51); width: 271px;" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" id="mktoForm_1275">
<style type="text/css">.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
color:#fff;
border:1px solid #75ae4c;
padding:0.4em 1em;
font-size:1em;
background-color:#99c47c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#99c47c), to(#75ae4c));
background-image: -webkit-linear-gradient(top, #99c47c, #75ae4c);
background-image: -moz-linear-gradient(top, #99c47c, #75ae4c);
background-image: linear-gradient(to bottom, #99c47c, #75ae4c);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
border:1px solid #447f19;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
outline:none;
border:1px solid #447f19;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active{
background-color:#75ae4c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#75ae4c), to(#99c47c));
background-image: -webkit-linear-gradient(top, #75ae4c, #99c47c);
background-image: -moz-linear-gradient(top, #75ae4c, #99c47c);
background-image: linear-gradient(to bottom, #75ae4c, #99c47c);
}
</style><div class="mktoFormRow"><div style="margin-bottom: 10px;" class="mktoFieldDescriptor mktoFormCol"><div style="width: 10px;" class="mktoOffset"></div><div class="mktoFieldWrap"><label style="width: 100px;" class="mktoLabel mktoHasWidth" for="FirstName"><div class="mktoAsterix">*</div>First Name:</label><div style="width: 10px;" class="mktoGutter mktoHasWidth"></div><input style="width: 150px;" class="mktoField mktoTextField mktoHasWidth mktoValid" maxlength="255" name="FirstName" id="FirstName" type="text"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div style="margin-bottom: 10px;" class="mktoFieldDescriptor mktoFormCol"><div style="width: 10px;" class="mktoOffset"></div><div class="mktoFieldWrap"><label style="width: 100px;" class="mktoLabel mktoHasWidth" for="LastName"><div class="mktoAsterix">*</div>Last Name:</label><div style="width: 10px;" class="mktoGutter mktoHasWidth"></div><input style="width: 150px;" class="mktoField mktoTextField mktoHasWidth mktoValid" maxlength="255" name="LastName" id="LastName" type="text"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div style="margin-bottom: 10px;" class="mktoFieldDescriptor mktoFormCol"><div style="width: 10px;" class="mktoOffset"></div><div class="mktoFieldWrap"><label style="width: 100px;" class="mktoLabel mktoHasWidth" for="Email"><div class="mktoAsterix">*</div>Email Address:</label><div style="width: 10px;" class="mktoGutter mktoHasWidth"></div><input style="width: 150px;" class="mktoField mktoEmailField mktoHasWidth mktoValid" maxlength="255" name="Email" id="Email" type="email"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><div style="margin-bottom: 10px;" class="mktoFieldDescriptor mktoFormCol"><div style="width: 10px;" class="mktoOffset"></div><div class="mktoFieldWrap"><label style="width: 100px;" class="mktoLabel mktoHasWidth" for="Company"><div class="mktoAsterix">*</div>Company Name:</label><div style="width: 10px;" class="mktoGutter mktoHasWidth"></div><input style="width: 150px;" class="mktoField mktoTextField mktoHasWidth" maxlength="255" name="Company" id="Company" type="text"><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoClear"></div></div><div class="mktoFormRow"><input value="" style="margin-bottom: 10px;" class="mktoField mktoFieldDescriptor mktoFormCol" name="utmmedium" type="hidden"><div class="mktoClear"></div></div><div class="mktoButtonRow"><span style="margin-left: 120px;" class="mktoButtonWrap mktoSimple"><button class="mktoButton" type="submit">Submit</button></span></div><input value="1275" class="mktoField mktoFieldDescriptor" name="formid" type="hidden"><input value="1939" class="mktoField mktoFieldDescriptor" name="lpId" type="hidden"><input value="24" class="mktoField mktoFieldDescriptor" name="subId" type="hidden"><input value="217-MIC-854" class="mktoField mktoFieldDescriptor" name="munchkinId" type="hidden"><input value="//pages.brighthr.com/zzz_test.html?cr={creative}&amp;kw={keyword}" class="mktoField mktoFieldDescriptor" name="lpurl" type="hidden"><input value="" class="mktoField mktoFieldDescriptor" name="cr" type="hidden"><input value="" class="mktoField mktoFieldDescriptor" name="kw" type="hidden"><input value="" class="mktoField mktoFieldDescriptor" name="q" type="hidden"></form>

The Standard Marketo Form

There’s a lot of markup within the form, and it certainly doesn’t lend itself to being compliant within a responsive structure or container.

The Responsive Marketo Form

The solution is to programatically remove the extra inline styles and classes using jQuery (so this assumes the jQuery library is loaded), and then apply extra classes from your responsive framework or custom external CSS files to the form and field elements.

 

The Magical Marketo Form Removal Code

And here’s the code that we use to remove the the inline styles and CSS classes. In this example, I’ve added some inline CSS in, to show in the resulting markup how easy it is to override the default Marketo form CSS and inline styles. In the production environment, these are all applied as classes.

 
var $jQ = jQuery.noConflict();
      $jQ(window).load(function(){
         $jQ('.mktoForm input, .mktoForm textarea, .mktoForm label, .mktoForm .mktoFormCol, .mktoForm .mktoButtonWrap, .mktoRequired').removeAttr('style');
         $jQ('.mktoForm').css('width', '100%')
         $jQ('.mktoOffset, .mktoGutter').remove();
         $jQ('label').remove();
         $jQ('input.mktoField, input.mktoTextField').removeClass('mktoField').removeClass('mktoTextField');
         $jQ('.mktoFieldWrap').removeClass('mktoFieldWrap');
         $jQ('.mktoFormCol').removeClass('mktoFormCol');
         $jQ('.mktoButtonRow').removeClass('mktoButtonRow');
         $jQ('.mktoForm button').addClass('register').removeClass('mktoButton');
         $jQ("input.mktoHasWidth, .mktoHtmlText.mktoHasWidth").removeClass('mktoHasWidth').css({
              'width':'100%!important',
              'margin':'0'
             });
      });

 

Firstly we remove all inline CSS from the elements that are within the form

 $jQ('.mktoForm input, .mktoForm textarea, .mktoForm label, .mktoForm .mktoFormCol, .mktoForm .mktoButtonWrap, .mktoRequired').removeAttr('style');

Then we set the width of the main form to be 100%, so that it will span the whole container element (BootStrap / Foundation etc)

 $jQ('.mktoForm').css('width', '100%')

We then remove the anicillary divs that Marketo use for padding the form elements, and also the labels as we will use HTML5 placeholder text in place of the normal label elements

 $jQ('.mktoOffset, .mktoGutter').remove();
 $jQ('label').remove();

We then remove the classes on the individual elements

 $jQ('input.mktoField, input.mktoTextField').removeClass('mktoField').removeClass('mktoTextField');
 $jQ('.mktoFieldWrap').removeClass('mktoFieldWrap');
 $jQ('.mktoFormCol').removeClass('mktoFormCol');
 $jQ('.mktoButtonRow').removeClass('mktoButtonRow');

Next up, we remove the standard Marketo button CSS class and replace with our own (defined in an external CSS file)

 $jQ('.mktoForm button').addClass('register').removeClass('mktoButton');

And finally we remove the width classes and replace with our own setting the element width to 100%

 $jQ("input.mktoHasWidth, .mktoHtmlText.mktoHasWidth").removeClass('mktoHasWidth').css({
              'width':'100%!important',
              'margin':'0'
             });

As I mentioned, we override and remove elements, and I’ve placed some elements inline so you can see the resulting markup, which produces the desired result and works in a responsive page layout. Enjoy!

<input style="margin: 0px;" class="mktoRequired mktoValid" maxlength="255" placeholder="Last Name" name="LastName" id="LastName" type="text">