Form CSS Classes and Examples

When your form’s layout template has a <style> tag, you can customize your hosted form’s CSS by targeting the default style classes.

Required Editions

Available in: All Account Engagement Editions

General

#pardot-form—Targets the entire form.

Example

#pardot-form {
color: #666666;
font: 13px/120% Tahoma,Arial,Helvetica,Verdana,sans-serif;
margin: 0.5em 0 1em;
padding: 0.5em;
}

Form Errors

.error—Targets form errors.

Example

#pardot-form span.error {
clear: left;
display: block;
font-weight: bold;
margin-top: 2px;
padding-left: 166px;
}

Required Fields

.required—Targets required fields. Makes the font bold, and adds a yellow star.

Example

#pardot-form p.required, #pardot-form span.required, #pardot-form label.required {
font-weight: bold;
background: url("/images/required.gif") no-repeat scroll right top transparent;

}

Field Descriptions

.description—Targets the field description.

Example

#pardot-form p span.description {
display: block;
margin-left: 153px;
}

Form Content Spacing

#pardot-form p—Targets all form content, and lets you adjust the margin and padding.

Example

#pardot-form p {
clear: left;
line-height: 1.4em;
margin: 3px 5px;
padding: 3px 2px;
}

Submit Button

#pardot-form p.submit—Targets the form submit button.

Example

#pardot-form p.submit {
margin: 1em 0.5em 0.2em 160px;
padding: 0;
}

Dropdown Fields

select—Targets dropdown fields.

Example

#pardot-form select {
font-weight: normal;
}

Checkbox Fields

input[type="checkbox"]—Targets checkbox fields.

Example

#pardot-form input[type="checkbox"] {
margin-right: 30px;
height: 50px;
}

Textarea Fields

textarea.standard—Targets textarea fields.

Example

#pardot-form textarea.standard {
float: none;
height: 70px;
overflow: auto;
padding: 2px;
width: 200px;
}

Text Fields

input—Targets the look and feel of text fields.

Example

#pardot-form input {
font-weight: normal;
margin-right: 5px;
padding: 2px;
}

input.text—Targets the width of the text field.

Example

#pardot-form input.text {
width: 200px;
}

Dependent Fields

.dependentField—Targets dependent fields. If you aren’t using the default CSS, include this styling in your CSS so that dependent fields aren’t displayed when not necessary.

Example

.dependentField {
    display: none;
}