Pardot Form CSS Framework & Examples

Want your Pardot form to match your brand? This can be done by using the Pardot form CSS generator or by writing some custom CSS. If you add custom CSS it can be difficult to know which CSS selectors to use. That’s why I created a CSS framework that you can use to style every aspect of your Pardot forms easily.

Adding Custom CSS

Before we dive into some tips and examples, it’s important to know how to update the custom CSS within Pardot. CSS for your form can be placed in your layout template or in the look & feel section of your form.

Default form settings

There are a couple of default settings that you can set within your form to make it easier to style. These settings can be found by navigating to your form > look and feel > styles.

One setting I always select is changing the required field character from default to a *. I also like to change the label alignment to above. For the rest of the settings (font color, size, etc) I prefer to use custom CSS.

CSS framework

Below is the CSS framework you can use to style your Pardot forms. It contains all the CSS classes needed to style all the elements of your form. Copy & paste the framework and add your custom CSS. Optionally, remove any of the classes that you won’t be using.


Examples

Styling the text inputs

Styling the labels

Non-required field labels


Required field labels

Centering the form, adding a background color or border

Setting a width for the form


Centering the form


Adding a background color

Styling the submit button

Centering the submit button

Styling the checkboxes or radio buttons

This requires a bit more explanation. Check out this post to learn how to style checkboxes and radio buttons within Pardot.

Styling select inputs (dropdowns)

Changing the font color for placeholder text


Questions?

Send me a tweet @jennamolby, or leave a comment below.