---
schema_version: "1"
id: f8e80a093576e8b05cb9c9f73550d78848fd98fd3f56b1495a8e608a99af4bd7
title: Design Web-Embedded Forms with CSS
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/design_forms_css.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.design_forms_css.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: bceebb3ce5b27e43ec6b05a0917c516a8ac26192dcd65ef589c4ced88f23609e
description: With Preference Manager, you can embed consent and preference forms on external websites and on Salesforce-hosted pages like Visualforce, Lightning Web Components (LWC), and Experience Cloud sites. To design your forms with custom branding and layouts, use Cascading Style Sheets (CSS) and custom CSS classes. To apply custom styles, define CSS rules in your website’s global stylesheet or apply inline styles on Salesforce pages to control the appearance of specific form elements.
products:
  - Security
  - Cross Cloud
release: "264"
---
# Design Web-Embedded Forms with CSS

With Preference Manager, you can embed consent and preference forms on external websites and on Salesforce-hosted pages like Visualforce, Lightning Web Components (LWC), and Experience Cloud sites. To design your forms with custom branding and layouts, use Cascading Style Sheets (CSS) and custom CSS classes. To apply custom styles, define CSS rules in your website’s global stylesheet or apply inline styles on Salesforce pages to control the appearance of specific form elements.

### 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: <strong>Developer</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, and <strong>Unlimited</strong> Editions. Requires the Privacy Center license.</td></tr></tbody></table>

Use these CSS classes to style your embedded forms.

  
| Element | CSS Class | Description |
| --- | --- | --- |
| Main Heading | `.prefmanager_heading` | Use to style the main heading of the form. |
| Form Container | `.pref-center-section-item .slds-card` | Use to style the container for the form and to remove the default border. |
| Description Text | `.prefmanager_description` | Use to style the descriptions for the main title and the data use purpose sections. |
| Data Use Purpose Header | `.prefmanager_subheading` | Use to style the data use purpose subheadings. |
| General Text | `.prefmanager_text` | Use to style text elements in the form. |
| Toggle Control | `.prefmanager_toggle` | Use to style checkbox toggle controls. For more customization options, see [_Salesforce Lightning Design System_: Checkbox Toggle](https://www.lightningdesignsystem.com/components/checkbox-toggle/). |
| Button Styling | `.prefmanager_button button.slds-button` | Use to style the buttons in the form. The appearance of buttons can also be affected by the community's theme settings. For more customization options, see [_Salesforce Lightning Design System_: Buttons](https://www.lightningdesignsystem.com/components/buttons/). |