---
schema_version: "1"
id: d11d1a791517a75c3f88b1459c22656063b190dc6ae537799782624b3a7bfea2
title: Form CSS Classes and Examples
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/mktg/264-0-0/pardot_forms_css_classes.md
canonical_url: https://help.salesforce.com/s/articleView?id=mktg.pardot_forms_css_classes.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: dfa05871d075e218c7053ce184ac3b16207df8d5ad62b477387e8b73a6cda006
description: When your form’s layout template has a <style> tag, you can customize your hosted form’s CSS by targeting the default style classes.
products:
  - Marketing
  - Marketing Cloud Account Engagement
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <span>All Account Engagement Editions</span></td></tr></tbody></table>

## General

`#pardot-form`—Targets the entire form.

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

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

## Dropdown Fields

`select`—Targets dropdown fields.

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

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

## Checkbox Fields

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

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

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

## Textarea Fields

`textarea.standard`—Targets textarea fields.

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

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

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

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
#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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-mktg-pardot-264-0-0-production-enus/5fef4d4f-9a34-45c6-8cd3-e3200b9eeba8/images/icon_example.png)

Example

```html
.dependentField {
    display: none;
}
```