Change Font Color

To customize the font color on your forms to add a pop of color and help highlight aspects of your form, simply copy and paste the CSS below.

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.

/*Apply the font color to the document body*/
body {
  color: #ff9900;
}
/* Apply the font color to the form container */
.slds-scope {
  color: #ff9900;
}
/*Apply the font color for the headings, table and titles */
.slds-scope h1,
.slds-scope h2,
.slds-scope h3,
.slds-scope h4,
.slds-scope h5,
.slds-scope h6,
.slds-scope th,
.slds-scope td {
  color: #ff9900;
}
/*Apply the font color to the form fields*/
.slds-scope .slds-input {
  color: #ff9900;
}
.containerBox input[type=text],
[type=number],
[type=date],
[type=datetime-local],
[type=url],
[type=phone],
[type=email] {
  color: #ff9900;
}
/*Apply the font color to the buttons*/
.slds-scope .slds-button_inverse,
.slds-scope .slds-button_inverse:link,
.slds-scope .slds-button_inverse:visited,
.slds-scope .slds-button-group .slds-button_icon-inverse,
.slds-scope .slds-button-group .slds-button_icon-inverse:link,
.slds-scope .slds-button-group .slds-button_icon-inverse:visited,
.slds-scope h2.title-form-section,
.slds-scope .slds-select_container select {
  color: #ff9900;
}
/*Apply the font color to the form labels*/
.form-horizontal .control-label {
  color: #ff9900!important;
}
.slds-scope .slds-form-element__label {
  color: #ff9900;
}
 
.slds-scope h2.title-form-section {
  color: #ff9900;
}
 
.slds-scope .save-button-container button {
  border-color: #ff9900;
}
 
/* Apply Font Color to Form Title and Sub Title */
h1.formName,
h3.form-number {
  color: #ff9900;
}
 
/* Apply Font Color to Free Text Question Type */
.slds-scope div.control-group.slds-text-align_center span{
  color: #ff9900 !important;
}

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.