Default Form Styling Classes

Updating Styles

Prepare your layout template with the correct wrapping by navigating to Administration > Forms or Landing Pages > Layout Templates. You will want to place this after the <head> in your layout template. When inspecting the code, any place you see form.form you’ll want to replace with #pardot-form when updating your layout template.

Default Styling

This styling is used to identify the form as a whole. If there is a look and feel for the entire form, you will want to make the change here.

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

This styling will show when there is an error on the form and the look and feel for this message.

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

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.

#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. Also, within the form options, you can change this to an asterisk.

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

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

This styling will allow you to change the positioning of the form. If you would like to move left or right the form, work with the margin and padding in this class.

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

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

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.

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

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

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

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

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

This styling will allow you to change the look and feel of a text box 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;
}

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).


Share on LinkedIn0Tweet about this on TwitterShare on Facebook0