Styling Forms in Pardot

Change form font styles

Add the css for changing the font style of your form to  your layout template in the header: NOTE: Anytime you see form.form you should change this to #pardot-form  #pardot-form { color:#EXAMPLE !important; font-family:EXAMPLE !important; font-size:EXAMPLE !important; }
#pardot-form {
  color:#EXAMPLE !important;
  font-family:EXAMPLE !important;
  font-size:EXAMPLE !important;

Form overview

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

Form errors

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

Disclaimer: Banner contains an affiliate link.

Required fields

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

Gold star for required fields

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

Form field descriptions

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

Form positioning

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

Form field labels

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

Submit button

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

Dropdown fields

#pardot-form select { font-weight: normal; }
Disclaimer: Banner contains an affiliate link.

Radio button fields

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

Checkbox fields

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

Textarea fields

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

Text Fields

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

#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;

Disclaimer: Banner contains an affiliate link.

Add a Comment

Your email address will not be published. Required fields are marked *