When you build a brand-new form in Marketo, that form will have default (and basic) styling. Marketo’s out-of-the-box form template gets the job done, but if you want to make any style changes to better align with your brand guidelines, you’ll need to think outside the box.
So, what’s a Marketo admin to do? CSS to the rescue! Below are 5 ways to add simple snippets of CSS code to give your forms some fresh style, along with how to add custom CSS in Marketo.
1. Make your form width fit the container.
Your landing page templates are built to be responsive. As a result, the container your form sits in will most likely move positions and the width will change depending on the size of the viewing display (desktop vs. mobile). To prevent this, you’ll want the form’s size to change along with the container.
Default form example:
The blue background color visually represents Marketo’s default form width, which in this case is smaller than this user’s viewing display.
To make the form span the width of the container, simply add some CSS that overrides the form element <form> and the divs with class “mktoFormCol”. Add the CSS below to the Custom CSS editor in the form editor (or to a <style> tag in the <head> section of the landing page template HTML):
form.mktoForm, .mktoFormCol {
width: 100% !important;
}
You can see in the image below that the form now spans the width of the container:
None of the other elements (labels, inputs, etc.) within the form have changed.
2. Position the labels above the input fields.
In the examples above, you’ll notice that the labels appear immediately to the left of their respective input fields. If that works for you, great! If you’d like to move each label above its respective input field, however (which many marketers do as it leaves more room for longer names, addresses, and other input field values), you can use a snippet of CSS code to quickly adjust your form layout:
.mktoForm .mktoOffset, .mktoForm .mktoAsterix, .mktoGutter {
display: none;
}
.mktoFieldWrap {
float: none !important;
}
.mktoLabel, .mktoField:not([name="emailOptIn"]) {
width: 100% !important;
float: none !important;
}
.mktoForm .mktoFormRow {
padding: 5px 5px;
}
You may notice the code contains CSS to hide elements (“mktoOffset”, “mktoAsterix”, and “mktoGutter”) that Marketo adds by default to the form code. That’s because these elements will cause spacing issues once you start moving around the labels and input fields.
In the form below, the labels now appear above the input fields:
Changing the width of the label and input elements to 100% will force your checkbox label and input checkbox to stack on top of one another, which marketers generally don’t want to happen. Usually, it’s preferable to have the label to the right or left of the input box. To prevent the CSS from affecting those elements, add the “:not” pseudo-class along with the “name” attribute used in the <input> for the checkbox:
.mktoField:not([name=emailOptIn])
PRO TIP: You can easily view the classes, styling, and attributes used in the form code by using the Inspector tool in your web browser. To do this, right click in the webpage and select “Inspect” from the menu:
Next, click on the Element selection tool:
Then, you can hover over and click on any object on the page, and the HTML and CSS will display in the Elements and Styles windows:
|
3. Move the label to the right of the checkbox.
When using the checkbox field in the Marketo form editor, its label will default to the left of the checkbox (as with every other label in your Marketo form). You could use CSS to adjust the positioning, but it’s a bit complex and may require the use of jquery.
An easier solution would be to change the Field Type to “Checkboxes” and simply remove the label text from the label field:
Next, click on the Edit link in the Values section. A new window will pop up where you can add the label text to the Display Value column. You can also use linked text by adding the link HTML in the Advanced Editor at the bottom of the Edit Values popup window:
Click Save, Finish, and then Approve and you should be all set.
To ensure that the label text area is the same width as the other form elements, and that your text won’t wrap to a new line, you may want to add the simple CSS snippet below:
.mktoCheckboxList {
width: 100% !important;
}
4. Change the look and feel of your input fields and labels.
Now that the widths and form element positions are sorted out, you’re ready to change the font style, size, and color to match your brand standards. You can also change how the input field looks by giving it a border, rounded edges, background color, and more. The form is now your oyster, so to speak.
To change the appearance of the input fields, use the class “mktoField” and add the CSS styling you want:
.mktoField {
border-radius: 20px;
border: 1px solid #929292;
padding: 10px 15px !important;
font-size: 16px !important;
color: #5A5A5A;
margin-top:5px !important;
}
In this case, I made the following style changes:
- Adjusted the border color and border radius
- Added padding around the input field text
- Modified the font size and color
- Inserted a 5px top margin to add a bit of space between the label and the input field
The form on the right is the result of adding the CSS above:
| Before | After |
 |
 |
To change the appearance of the labels, simply use the “label” tag in your CSS instead of “mktoField”. This will change all of the labels, including the Checkbox label.
However, sometimes you want the checkbox label to have different styling then the rest of the labels. If that’s the case, use the class “mktoLabel” instead to exclude the checkbox label. This only works because we setup the checkbox field in the form editor using the Display Value method (see #3 above). The text is still wrapped in a “label” tag; however, it is not assigned the “mktoLabel” class.
Alternatively, you can use the “label” tag for your styling and then add additional CSS that overrides the styling for the checkbox label only, as shown in the example CSS below:
label {
font-size: 16px !important;
font-weight: bold;
padding-left: 5px !important;
}
.mktoCheckboxList label {
color: #F11F22;
font-weight: normal;
}
label[for=emailOptIn] {
display: none;
}
As you can see, I added code that sets label[for=emailOptIn] to display:none;. Since we left the label field empty in the form editor for the checkbox field, the empty label element was causing awkward spacing. This extra bit of CSS removes that element and resolves the spacing issue (and changes the font color to red):
Keep in mind that “emailOptIn” is the HTML name for the field we are using in this example. You may use a different field for the checkbox with a different HTML name, in which case the value for the attribute will need to be for that specific field.
5. Give your button a makeover.
To change the styling of the button, use the class “mktoButton” and add the styling you want. You will need to override the default CSS for background-image that Marketo includes by setting that to “none !important”. This is easy to overlook and can cause some frustration:
.mktoButton {
background-color: #078DB5 !important;
background-image: none !important;
border: none !important;
border-radius: 30px;
padding: 12px 50px !important;
font-size: 16px !important;
font-weight: bold;
}
In this code above, I made the following style changes:
- Changed the button’s background color
- Adjusted the button’s border radius
- Added padding around the button
- Modified the font size and weight
As a result, instead of a square green button, you now have a cleaner, more stylized button that better meets your branding requirements:
Things to watch out for
Occasionally, you may run into issues where the styling doesn’t change despite the CSS you’ve just added. This is likely due to CSS that already exists in your external style sheets, which is usually the case when adding Marketo forms to non-Marketo landing pages. In those cases, you may need to adjust the specificity hierarchy of the selectors you’re using.
For example, if there is already CSS for class “mktolabel” (maybe somewhere inaccessible like an external style sheet or in the template HTML), and the label style hasn’t changed with the CSS you’ve added using that same class as a selector, you should then also include the element + class to your CSS:
| Default CSS: | .mktoLabel {border:1px solid #000000 !important;} |
| To override the default CSS, add the class: | .mktoLabel {border: none !important;} |
| If style doesn’t change, add the element: | label.mktoLabel {border: none !important;} |
| If the default CSS already contains the element, and the style doesn’t change, include the parent container: | div.mktoFieldWrap label.mktoLabel {border: none !important;} |
You can see how the elements are nested by using Inspector in the browser window. Start at the element you are trying to style. Then, work your way out by going to the parent container (and, if need be, the next parent container) and so on until you’ve reached hierarchal specificity that overrides the existing CSS:
How to add custom CSS in Marketo
You have a couple options on where you can place your form CSS.
Option 1: Marketo Form Editor
The easiest place to add your custom CSS is directly into the custom CSS editor within the Marketo Form Editor.
In the Form Editor, click on Form Settings in the left-hand menu. This will open to the Form Theme selection menu. To the far right of the theme name, you will see a cog icon. When you click on this, a menu will be displayed. Select the option for Edit Custom CSS:
After you click Edit Custom CSS, a new window will appear called Edit Simple Custom CSS:
You will add your CSS here:
The CSS should not need to be wrapped in a <style> tag. Once you’ve added your CSS, click SAVE, FINISH, and then Approve, and you’re done!
If you are writing the CSS and testing locally in an HTML editor such as Adobe Dreamweaver: Once you’ve added the CSS to the form editor, go back to your local testing environment and comment out the CSS at that level to make sure the form styling is loading and rendering correctly.
| PRO TIP: To comment out CSS, add “ /* ” before the section of code you want to disable, and “ */ ” after.
|
The live tests will show any rendering issues. If necessary, adjust the hierarchy specificity for the selectors in your CSS. This can be determined using the Inspector tool. The CSS will have strikethroughs on the styles that are overridden:
In this case, simply adding “!important” to the end of the styling is enough to override the existing CSS (I typically add it to the end of everything just to be safe):
Option 2: Landing Page Template
The other way to add custom CSS is to paste it directly into the Landing Page Template HTML. The benefit of this option is that you don’t have to always make sure to include custom CSS in every new form you create (this is especially helpful if you tend to create a unique form for each campaign).
Also, if you want to make a change to your form styling, but you already have existing forms in use for active campaigns, you would only need to update the CSS at the Landing Page Template level instead of updating the CSS within each form.
To add the CSS to the Landing Page Template, click Edit Draft to view the LP template source. Then, wrap the custom CSS in a <style> tag (or add it to an existing <style> tag) immediately above the closing </head> tag:
Combining form and function
Knowing how to use CSS to make simple styling changes to your Marketo forms can give you the flexibility to design your forms as you see fit. If you’d like some help getting those landing pages and forms just right, we can help! Learn more about out our wide range of customizable Marketo Admin Services and let us know how we can give your forms some serious style while helping you meet your campaign objectives.
Adam Mokrzecki is a Marketo-certified Senior Implementation Architect in BDO Digital’s Demand Gen Group. A jack of all trades, Adam offers extensive experience in campaign strategy and execution, lead management, email and landing page template development, and reporting and analytics. He has a keen sense for problem solving, quickly finding and implementing creative solutions to any challenges keeping clients from reaching their marketing goals.
The post CSS to the Rescue! 5 Ways to Make Basic Style Changes to Your Marketo Forms appeared first on DemandGen.
