How to Modify Form Theme (Text & Background Color, Font Size)

The ability to override the default colors and font options for forms has been introduced in Version 12.5 and Version 12.0 (Patch 14 or later). 

This override formatting options apply to display in the web browser, HTML emails, and PDF export options.

Version 13.0, 12.5 and Version 12.0 (Patch 14 or later)

  • To override form options:
    • In Lib/Styles folder is a new file called themes_form_sample.cfm
    • User must copy file, edit style values, and save as Lib/Styles/themes_form.cfm for override to take effect
    • This will override the theme for all forms, including when they are displayed in browser, send as email, or exported to PDF
    • Requirement to rename themes_form_sample.cfm to themes_form.cfm was introduced to ensure user changes are not overwritten if themes_form_sample.cfm changes in an later patch 
    • If a user incorrectly changes themes_form.cfm (invalid values, changes CF tags), this file will be ignored, and default theme will be used

Options than can be override include:

<!--- form styles --->

<cfset Font = ""> <!--- font-family: Eg. Verdana --->
<cfset FontSize = "8"> <!--- font-size: Eg. 12 (numeric value in pt) --->
<cfset BorderColor = ""> <!--- border-color: Eg. hex color ##CCCCCC or known name such as gray --->
<cfset HighlightColor = ""> <!--- color: used in build interface only --->
<cfset BottomSpacing = ""> <!--- margin-bottom: used to increase whitespace below forms Eg. 200 (numeric value in px) --->

<!--- section styles --->
<cfset SectionBackgroundColor = "##000000"> <!--- background-color: Eg. ##FFFFFF --->
<cfset SectionFontColor = "##FFFFFF"> <!--- color: Eg. ##000000 --->

<!--- field styles --->
<cfset FieldLabelBackgroundColor = "##000000"> <!--- background-color: Eg. ##FFFFFF --->
<cfset FieldLabelColor = ""> <!--- color: used for field label text Eg. ##000000 --->
<cfset FieldInputColor = ""> <!--- color: used for field input control text Eg. ##000000 --->
<cfset FieldRequiredColor = "red"> <!--- color: used for required asterisk color Eg. red --->
<cfset FieldPrivateColor = "red"> <!--- color: used for private field asterisk color Eg. gray --->

In addition, the ability to override instruction text color was introduced in V12.0 Patch 16, V12.5 Patch 6

<cfset FieldInstructionsColor = "red"> <!--- color: used for field instructions text Eg. gray --->

 

The above will allow you style parts of the form. With respect to altering the style of 'disabled' fields. Please edit the form, and the add following to the 'Custom Code' section above the form:

<style>
input:disabled
{
background:#ffff00;
}
</style>

Referenced by:

Have more questions? Submit a request

0 Comments

Article is closed for comments.