Loading
Salesforce now sends email only from verified domains. Read More
Market to Your Customers with Account Engagement
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Form CSS Classes and Examples

            You are here:

            1. Salesforce Help
            2. Docs
            3. Marketing Cloud Account Engagement

            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
            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
            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
            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
            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
            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
            Example 
            #pardot-form p.submit {
margin: 1em 0.5em 0.2em 160px;
padding: 0;
}

            Dropdown Fields

            select—Targets dropdown fields.

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

            Checkbox Fields

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

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

            Textarea Fields

            textarea.standard—Targets textarea fields.

            Example
            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
            Example 
            #pardot-form input {
font-weight: normal;
margin-right: 5px;
padding: 2px;
}

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

            Example
            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
            Example 
            .dependentField {
    display: none;
}
             
            Loading
            Salesforce Help | Article