This entry is part 2 of 7 in the series CSS for Forms

Updating Styles

Prepare your form’s layout template with the correct <style> tag by navigating to Marketing > Forms or Landing Pages > Layout Templates, and editing your layout template. You will want to place the <style> tag after the <head> tag in your layout template.

You can then insert the following CSS examples and edit the selectors to get your desired CSS change.

Default Styling

Form overview

This styling is used to identify and style the form as a whole.
If there is a look and feel for the entire form–such as the font for your text, or colors–you can update this CSS rule to include the styles you prefer.

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

Form errors

This styling will take effect when there is an error on the form.
The following rule affects the color, positioning, and font-weights of the error message.

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

Required fields

This styling allows for the required fields to be bolded.
If you would like to change this to be all the same weight, you can change this to “normal” instead of “bold”.

#pardot-form p.required, #pardot-form span.required, #pardot-form label.required {
font-weight: bold;
}

This styling displays the gold star for required fields.
You can make “none” if you wish to hide the default required star. Within the form builder look and feel options, you can change this symbol to an asterisk.

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

Form field descriptions

This styling will change the look and feel if you add a description to the field.

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

Form positioning

This styling will allow you to change the positioning of the form.
The margin and padding in this class lets you shift your entire form left or right.

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

Form field labels

This styling will allow you to change the look and feel of the label for the fields.
If you want to change the font or colors, you can change this class.

#pardot-form p label {
display: block;
float: left;
margin: 0;
padding: 3px 13px 0 0;
text-align: right;
width: 140px;
}

Submit button

This styling will allow you to change the positioning of the submit button.
If you need to move the button left or right, increase or lower the 160px margin.

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

Dropdown fields

This styling will allow you to change the look and feel of a dropdown field.

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

Radio button fields

This styling will allow you to change the look and feel of a radio button field.

#pardot-form input[type="radio"] {
font-weight: bold;
width: 50px;
}

Checkbox fields

This styling will allow you to change the look and feel of a checkbox field.

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

Textarea fields

This styling will allow you to change the look and feel of a textarea field.
Common textarea fields (like “comments”) are larger than standard text fields, and let you enter more information.

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

Text fields

This styling will allow you to change the look and feel of a text field.

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

This styling will allow you to change the width of a text field.

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

Dependent fields

This styling will hide dependent fields.
If you are not using the default CSS, make sure you include this styling in your CSS so that dependent fields are not displayed on the blank form.

.dependentFieldSlave {
    display: none;
}

*NOTE: For all templates created after 1/21/2012, the following id and classes are also available for your use in addition to those included above:

- The form element now has a ‘pardot-form’ id.
- Form field wrapper elements now have a ‘form-field’ class.
- Label elements now have a ‘field-label’ class (this will not include
radio and checkbox labels as the use of ‘form.form p label’ option does).

Series Navigation

<< Basic CSS for FormsChanging the Styling of Form Text >>