Styling Forms
Forms are styled using CSS themes that you can customize to match the design of your website.
Required Editions
| Available in: Salesforce Classic |
Available for purchase in: Enterprise, Performance, and Unlimited Editions Available (with limitations) in: Developer Edition |
| User Permissions Needed | |
|---|---|
| To build, edit, and manage Site.com sites: | Site.com Publisher User field enabled on the user detail page AND Site administrator or designer role assigned at the site level |
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:
- Select the form on the page.
- Select a theme to use as a base in the Theme section of the Properties pane.
- Open the Style pane and ensure Class is selected.
-
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 If you're familiar with CSS, you can also modify the style of the form in the site's style sheet. - To style the selected part of the form, update the Style pane properties. Your theme customizations are reflected immediately in the form, and apply to the selected form only.
- Repeat as required for each part of the form.
