How to Adjust Custom Styling on Forms with CSS

Out of the box, Youreka comes with many features that allow you to adjust the look and feel of form templates. Between adding rich text, images, coloring and more to Form Templates, you are able to adjust how forms look to your users. However, in the event that you wish to go above and beyond the out-of-box formatting capabilities, you can use CSS to adjust how your forms appear to end users.

CSS can be applied to forms at the Form Template level, which means if you wish to adjust how forms look, CSS should be applied to each Form Template your users are using. Below is a set of instructions on how to edit the CSS for a form template.

1. Navigate to the Form Template Object listed in your Custom Objects. Follow this click path: Setup > Create > Objects > Form Template
2. Edit the Form Template page layout, and add the CSS CompleteForm and CSS FormDetail fields to the Form Template page layout.
3. Once you have added the CSS fields to the Form Template page layout, visit any Form Template record in Salesforce.
4. Open the gear menu in the top right corner, and select Edit Template Properties.
5. Edit the CSS fields on the Form Template and add your CSS to them. After Save, the CSS updates will be applied to all forms for that template. The CSS should be entered as it would appear in an external CSS file, it should NOT include a style tag.

Example CSS

Examples of Form Templates with CSS can be seen below: