Marketo offers 7 themes that you can use for your forms, but what if you want your form to match your branding? You can add your own CSS style to match your brand, however, this is very difficult because Marketo adds their own CSS classes and inline CSS. Here is how you can style your Marketo form like a pro.
Adding Custom CSS
Before we dive into some tips and examples, it’s important to know how to update the custom CSS within Marketo. Navigate to the form and open up the form editor. Click on Form Settings > Form Theme > Edit Custom CSS this is where you can paste in your own CSS.
Choosing a default theme
Marketo requires that you select one of their themes to start. Changing themes will affect the CSS as well as the structure of the HTML. For this tutorial, I will be using the “simple” theme which is the default theme when you create a new form.
Form Preview
Here’s what the form looks like with the default Marketo styling.
The structure of a Marketo form
The typical HTML stucture for a text field in Marketo looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="mktoFormRow"> <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"></div> <div class="mktoFieldWrap mktoRequiredField"> <label class="mktoLabel mktoHasWidth" for="FirstName" style="width: 100px;"></label> <div class="mktoAsterix"> <label class="mktoLabel mktoHasWidth" for="FirstName" style="width: 100px;">*</label> </div> <label class="mktoLabel mktoHasWidth" for="FirstName" style="width: 100px;">First Name:</label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input class="mktoField mktoTextField mktoHasWidth mktoRequired" id="FirstName" maxlength="255" name="FirstName"style="width: 150px;" type="text"> <div class="mktoClear"></div> </div> <div class="mktoClear"></div> </div> <div class="mktoClear"></div> </div> |
Almost all of the classes you see already have CSS properties attached to them, so in order to use your own styling within the form all those CSS properties need to be overridden with new ones.
Unbold the Label
By default, any fields that are marked as “required” will have labels that are bold. To override this you can add this piece of code.
1 2 3 |
.mktoForm .mktoRequiredField label.mktoLabel { font-weight:normal !important; } |
Responsive form fields
Field widths are set to a fixed width, to override the set field widths you can add a percentage width like this.
1 2 3 4 5 6 |
.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField { width:100% !important; } .mktoFormCol, .mktoFieldWrap { width:100% !important; } |
The mktoOffset
Above each form field there is a div with the class of mktoOffset. This DIV is used to control the vertical spacing of the form fields. The default CSS looks like this.
1 2 3 4 5 |
.mktoForm .mktoOffset { float: left; height: 1.2em; width:10px; } |
You can override the height and width by using this CSS
1 2 3 4 5 |
.mktoForm .mktoOffset { float: left; height:0 !important; width:10px; } |
Center the Submit Button
The submit button is wrapped in a SPAN with an inline CSS style for margin-left. In order to center the submit button, the first thing you need to do is override the margin-left property and set it to 0px.
1 2 3 |
.mktoButtonWrap { margin-left:0 !important; } |
The submit button is also wrapped in a DIV with the class named mktoButtonRow. There is a CSS property to align the text to the left, so we need to override that and change it to CENTER. There is also no width on the DIV, so a width will need to be added.
1 2 3 4 |
.mktoButtonRow { width:100% !important; text-align:center; } |
Change the Button Style
To change the button style to match you brand, you will need to override the properties for .mktoForm .mktoButtonWrap.mktoSimple .mktoButton. Here are some examples of what that would look like
Full Width Button
1 2 3 |
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { width:100%; } |
Change the button background color
1 2 3 |
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { background:green !important; } |
Remove the border from the button
1 2 3 |
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { border:0 !important; } |
Add padding to the button
1 2 3 |
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { padding:10px 20px !important; } |
Change the font size of the button
1 2 3 |
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { font-size:20px !important; } |
Fixing the radio buttons and checkboxes
If you have chosen to have the Marketo labels “above the form” instead of “to the left”, you might encounter an issue with the label for the radio buttons and checkboxes showing below the label.
Add this CSS code to put the label and the checkbox/radio button beside each other.
1 2 3 4 5 |
.mktoForm.mktoLayoutAbove .mktoRadioList, .mktoForm.mktoLayoutAbove .mktoCheckboxList { width:auto !important; float:left !important; clear:none !important; } |
Questions?
Email me, send me a tweet @jennamolby, or leave a comment
Great article! Looks like I’m a few years late, but new to Marketo. Can you please share the CSS for adding a border around a form? Thank you!
Hi Michelle, Adding this CSS should do the trick: .mktoForm {border:solid 1px #CCC;}. Cheers, Jenna
I see this article is a few years old, if I am looking to have the width of a button be 100% would I still use this code?
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
width:100%;
}
Hello, Yes, that’s correct. You will also need to make the button container and wrapper 100% width like this .mktoButtonWrap, mktoButtonRow {
width:100% !important;
} Cheers, Jenna
Hi Jenna,
Your article is great! Its helping me a lot!
Just want to know what CSS i can put the to make fieldset label bold? I tried a lot but its not happening.
Can you help me with this.
Thanks!
Hi Rashmi, So happy you found it helpful! To make the fieldset label bold, add this CSS .mktoForm fieldset legend {
font-weight:bold;
} Cheers, Jenna
You Rock Jenna! Thanks!
Life changing.