Pardot Knowledge Base

Advanced Form Field Option: CSS Classes

Last Updated: May 19, 2016 | Print this Article
 
Whoa there, partner! This is advanced stuff, and assumes you have experience with HTML and CSS. Proceed with caution.

The CSS Classes option can be found under any form field by editing the field and then clicking the Advanced Tab. So, if we add the CSS Class of "customclass" below, it allows you to target a specific element on the page with that class:

CSS Classes 1

The results are shown in the highlighted area here: CSS Classes 2

This adds the custom CSS class to the paragraph that wraps the entire field and label. You can then target this class with CSS. For example: #pardot-form .customclass {color: red;} Note: The #pardot-form targets the form. If you don't include this before the .customclass, your CSS will not be applied in the form.

Note: You can add multiple CSS classes separated by a space. 

More Form Styling Resources

Default Form Style Classes Reference 
Changing Form Submit Button to an Image
Removing Form Autofocus

Need more? Start a conversation with other Pardot users in our Success Community