Change Form Field Color

Add multiple colors to differentiate elements on your form. Copy and paste the CSS below to customize each element to your specifications.

Unsure how to add custom CSS to your Form Template? Click ‘How to add custom CSS to a Form Template’ below and follow the steps to add the necessary fields to your template override page.

.slds-scope .buttons-fixed { /* Save Buttons Bar */
  background-color: #5C9EAD;
} 


h1.formName, /* ELEMENT: Template Name */
h3.slds-text-heading_small { /* ELEMENT: Form Name */
 color: #326273; /* STYLE: Text color */
}

body#complete-form.slds-scope { /* ELEMENT: Form Background Color */
  background-color: #94E9E8;
}

.slds-scope .currentPageContainer { /* ELEMENTS: Section Header Font Color */
  color: #EEEEEE;  /* STYLE: Text color */
}

.slds-scope .slds-card.form-section { /* ELEMENTS: Section Header and Footer */
  background-color: #E39774;
  border-color: #EEEEEE;
}

.slds-scope .slds-card__body.OR-card__body.slds-p-left_small { /* ELEMENT: Section Body */
  background-color: #326273;
  border-color: #326273;
  color: #fff;  /* STYLE: Text color */
}

.slds-scope .controls .selected-files .file-preview, /* ELEMENT: Attachment Count Badge */
.slds-scope .controls .slds-file-selector .slds-badge.slds-theme_info, /* ELEMENT: Attachments */
.ms-selectable .ui-widget-content.ui-selectee.ui-selected { /* ELEMENT: Selected Multi-select Picklist Options */
  color: #75A05F;  /* STYLE: Text color */
  background-color: #fff;
}

.slds-scope .control-group.slds-text-align_center, /* ELEMENT: Free Text in Section*/ 
.slds-scope .slds-form-element__control .slds-form-element__label, /* ELEMENT: Checkbox and Radio Button Label Colors */ 
.slds-scope .slds-card__body.OR-card__body.slds-p-left_small  .control-label { /* ELEMENT: Question Text Colors */ 
  color: #fff !important;  /* STYLE: Text color */
}  

Add Custom CSS to a Form Template

Follow these steps to add custom styling to your form template:

  1. Navigate to the Form Template Object listed in your Custom Objects. Follow this click path – Setup > Create > Objects > Form TemplateForm Template Object.jpg
  2. Scroll down to the Page Layouts list. Under Page Layouts, edit the Form Template Layout (click Edit)Page Layout List.jpg
  3. Drag and drop the ‘CSS CompleteForm’ and ‘CSS FormDetail’ fields into the Information Section and then click Save:Drag and Drop CSS.jpg
  4. Back on the Form Template Object page, add a New Custom Field under Custom Fields and Relationships:New Custom Field.jpg
  5. For Field Type, select Formula:Formula Field.jpg
  6. In Step 2, label the field ‘Standard Edit Page’ and set the Output Type to Text:Step 2.jpg
  7. In Step 3, enter the Advanced Formula (copy & paste):
    “HYPERLINK('/'& Id &'/e?nooverride=1','Click to edit')”Step 3.jpg
  8. Click Next until the final step where you Save the New Custom Field.
  9. Navigate to the Form Templates Tab to display your list of Templates. Next, to View at the top of the page, click Edit: Edit Form Template.jpg
  10. 10. Under ‘Select Fields to Display’ add the Standard Edit Page field you just created to the Selected Fields list. Click Save when complete:Add Fields.jpg
  11. You will now see the Standard Edit Page field on the Form Template List View:List.jpg
  12. Now, when users click the new Standard Edit Page hyperlink, they will be able to edit the CSS fields on the Form Template. After Save, the CSS updates will be applied to all Forms for that Template. The CSS should be entered in the CSS CompleteForm and CSS FormDetail fields as it would appear in an external CSS file, it should NOT include a

We use cookies to ensure that we give you the best experience on our website.
If you continue to use this site we will assume that you are happy with it.