---
schema_version: "1"
id: 832181dd257409b9ab5f148a13aca1690c8050ac3c2547fcc9fd1dbd79976a70
title: Styling Forms
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_data_form_style.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_data_form_style.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: af5c1e421f386d231cba7f0a920596beb682267ed4b5ac0cf45892aead4b7523
description: Forms are styled using CSS themes that you can customize to match the design of your website.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Styling Forms

Forms are styled using CSS themes that you can customize to match the design of your website.

### 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: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d207738e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d207738e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d207738e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
        </tbody>
      </table>

When you add a form to a page, the form uses a default theme to control its appearance. To change the form's theme, select an option in the Theme section in the Properties pane:

- Default places the field name above the text box. Required fields are denoted by a red asterisk (\*) beside the field name.
- Salesforce places the field name to the left of the text box. Required fields are denoted by a red vertical bar (|) in front of the text box.

Alternatively, to customize a theme to suit your needs:

1. Select the form on the page.
2. Select a theme to use as a base in the Theme section of the Properties pane.
3. Open the Style pane and ensure **Class** is selected.
4. In the Style drop-down list, select the part of the form that you want to style. When you select an item, it's highlighted for a few seconds so you can easily see which part you're styling.
    
     
    | Option | Description |
    | --- | --- |
    | Entire form | Styles the whole form. |
    | Field rows | Styles each field row. |
    | Field labels | Styles the labels of each field. |
    | Fields | Styles the fields (text boxes, drop-down lists, and so on). Only available for the Salesforce theme. |
    | Required symbol | Styles the asterisk symbol (\*) for required fields. Only available for the default theme. |
    | Error message | Styles the error message that's displayed when users try to submit an incorrectly completed form. Only available for the default theme. |
    
    ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)
    
    Tip If you're familiar with CSS, you can also modify the style of the form in the site's style sheet.
5. To style the selected part of the form, update the [Style pane properties](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5 "The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements."). Your theme customizations are reflected immediately in the form, and apply to the selected form only.
6. Repeat as required for each part of the form.

#### See Also

- [Adding a Form to the Page](https://help.salesforce.com/s/articleView?id=platform.siteforce_data_form.htm&release=264.0.0&type=5 "Use forms to collect data from your site visitors and submit the data to standard or custom Salesforce objects. Create web-to-lead forms, capture customer details, or gather feedback on your products or services.")