Bigger font size

Would you like to adjust the size of the fonts in your form? Follow the directions below to change relative sizes or copy and paste this CSS to adjust for individual sizes.

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.
/* All font sizes on this template are set to be relative 
to the .slds-scope class font-size. If you want to change everything 
proportionally, change just the font-size in the .slds-scope class.
If you want to change font-sizes relative other ones, change 
the indvidual styles below. */
 
/* NOTE: The "em" unit of measure is porportional to the parent size. 
For Example, if .slds-scope has a font-size of 14px, a another class 
that has a size of 2em will have a font-size of 28px on the page 
(e.g. 2 x 14).*/
 
/********* Set proportional size here *********/
.slds-scope {
	font-size: 24px !important; 
}
 
 
 
/********* Set relative sizes below *********/
/* Template Name */ 
.slds-scope #formContent h1.formName {
	font-size: 2.285em;
}
 
 
/* Form Name */
.slds-scope #formContent h3.slds-text-heading_small {
	font-size: 1.286em;
}
 
 
/* Save Buttons Sizes */
.slds-scope .buttons-fixed button {
	line-height: 2.5em;
} 
 
 
/* Go To Page Select */
.slds-scope .buttons-fixed .slds-select.goToPage,
.slds-scope .buttons-fixed .pagination-container .slds-select_container,
.slds-scope .buttons-fixed .pagination-container .slds-select_container select {
	width: 7.15em;
	height: 2.44em;
}
 
 
/* Select Arrows */ 
.slds-scope #mainForm .slds-select_container:before,
.slds-scope #mainForm .slds-select_container:after {
  border-left-width: 0.214em;
  border-right-width: 0.214em;
}
.slds-scope #mainForm .slds-select_container:before {
  border-bottom-width: 0.357em;
  top: calc((2.429em / 2) - 0.429em);
}
.slds-scope #mainForm .slds-select_container:after {
  	border-top-width: 0.357em;
  	bottom: calc((2.429em / 2) - 0.429em);
}
 
 
/* Padding for top of form */
div.currentPageContainer {
	padding-top: 5em;
}
 
 
/* Icon Sizes */
.slds-scope svg.slds-button__icon {
	height: 1.143em;
	width: 1.143em;
}
 
 
/* Input Heights */
.slds-scope .slds-form-element__control input,
.slds-scope .form-section .control-group .controls select {
	height: 2.5em;
}
 
 
/* Attachment Upload Button Font Size */
.slds-scope span.slds-button {
	line-height: 2.43em;
}
 
 
/* Section Header Font Size */
.form-section.slds-card h2 {
	font-size: 1.28em;
}
 
 
/* Question Text vertical position */
.form-section.slds-card .control-label {
  	padding-top: 0.35em;
}
 
 
/* Attachment Upload Button */ 
.slds-scope button.slds-button {
	line-height: 2.385em;
}
 
 
/* Checkbox/Radio Button Size */ 
.slds-scope .slds-form-element__control .slds-radio .slds-radio_faux,
.slds-scope .slds-form-element__control .slds-checkbox .slds-checkbox_faux {
	width: 1em;
	height: 1em;
}
/* Checkbox/Radio Button Option Label Text Size */ 
.slds-scope .slds-form-element__control .slds-radio .slds-form-element__label,
.slds-scope .slds-form-element__control .slds-checkbox .slds-form-element__label {
	font-size: 1em;
}
/* Checkbox & Radio Button check size */
.slds-scope .slds-form-element__control .slds-radio [type="radio"]:checked + .slds-radio_faux::after, 
.slds-scope .slds-form-element__control .slds-radio [type="radio"]:checked ~ .slds-radio_faux::after
.slds-scope .slds-form-element__control .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux::after, 
.slds-scope .slds-form-element__control .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux::after {
	border-bottom-width: 0.143em;
  	border-left-width: 0.143em;
	height: 0.286em;
  	width: 0.59em;
}
 
 
/* E-Signature Height */ 
.slds-scope .sig-answer-container.sig-empty {
	height: 4.286em;
}
 
 
/* Date Input Selector Icon */ 
.slds-scope .slds-form-element .input-glyphicon-calendar {
  	padding-top: 0.5em;
}
 
 
/* Input Width */ 
.slds-scope .controls .ms-selectable, /* Multi-select Picklist Container */
.slds-scope .controls .ms-selectable ol, /* Multi-select Picklist */
.slds-scope #mainForm .slds-form-element.long-text-container, /* Long Text Container */
.slds-scope #mainForm .slds-form-element.OR-form-element_width, /* Long Text */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control, /* General Input Container */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control input, /* General Input */
.slds-scope .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container, /* Select Container */
.slds-scope .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container select, /* Select */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container select option { /* Select Options */
	width: 17.857em;
	max-width: 100%;
}
@media screen and (max-width: 680px) {
	.slds-scope #mainForm .form-section textarea.slds-textarea {
		min-width: 98%;
	}
}

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.