Loading
Prepare for Email to Become the Default Login ExperienceRead More
Data Protection and Privacy
Design Web-Embedded Forms with CSS

You are here:

  1. Salesforce Help
  2. Docs
  3. Data Protection and Privacy

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

Available in: Developer, Enterprise, Performance, and Unlimited Editions. Requires the Privacy Center license.

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.
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.
 
Loading
Salesforce Help | Article