Theme Customization Controls 


In this Article
Related Articles

Overview

This document outlines the standardized controls used in FormAssembly themes.  You have 36 options to control within the form builder, but if you'd like to stylize your form even more, you can use the controls below along with your CSS knowledge to accomplish this.

Please Note:  Our Support team cannot support or write custom CSS code.


Controls and Selectors

LOGO

Name of ControlDescription of ControlSelectors
Logo ImageAllows for a logo image upload. Logo is placed in the page header, above the form..wFormContainer .wFormHeader
Logo SizeLogo image size. Image size is set by the width and scales proportionately. User can enter a numerical value in the text input, and then select a scaling unit (ex. px, em, rem, etc.).wFormContainer .wFormHeader
Logo PositionHorizontal positioning of the logo image. Choices include left, center, and right..wFormContainer .wFormHeader


BACKGROUND

Name of ControlDescription of ControlSelectors
Background ColorBackground color of the page, behind the form..wFormWebPage
Form Background ColorBackground color of the form.wFormContainer .wForm,
     .reviewHeader,
     .reviewResponse,
     .reviewFooter,
     .wForm .field-hint-inactive .hint,
     .wForm .hintsBelow .field-hint, .wform .hintsSide .field-hint
Background color of the pop-up calendar (found on date inputs)html .kalendae
Form Header Background ColorBackground color of the form header. (Background of the form title).wFormContainer .wForm .wFormTitle
Text color of the links in the page footer (ex. "Contact Information" and "Your Rights Under GDPR")
Exceptions
     Lightning - Footer links controlled by Input Text Color control
     Polar and Tag - Footer link color controlled by Link Text Color control
.wFormContainer .wFormFooter .supportInfo a,
      .wFormContainer .wFormFooter .supportInfo a:hover


BORDERS

Name of ControlDescription of ControlSelectors
Form Border ColorColor of the form border. If no border is desired a color with 0 opacity can be chosen. .wFormContainer .wForm,
     .reviewHeader,
     .reviewResponse
Form Fieldset Border ColorColor of the fieldset border.wFormContainer fieldset
Color of the emphasized fieldset border.wFormContainer fieldset.highlighted
Color of input borders on focus (when the form respondent has clicked into the input).wFormContainer .wForm .inputWrapper textarea:focus,
      .wFormContainer .wForm .inputWrapper textarea.required:focus,
      .wFormContainer .wForm .inputWrapper input[type='text']:focus,
      .wFormContainer .wForm .inputWrapper input[type='text'].required:focus,
      .wFormContainer .wForm .inputWrapper input[type='password']:focus,
      .wFormContainer .wForm .inputWrapper input[type='password'].required:focus,
      .wFormContainer .wForm .inputWrapper select:focus,
      .wFormContainer .wForm .inputWrapper select.required:focus


TITLE

Name of ControlDescription of ControlSelectors
Title FontFont-family of the form title.wFormContainer .wForm .wFormTitle
Title Font SizeFont-size of the form title. User can enter a numerical value in the text input, and then select a scaling unit (ex. px, em, rem, etc.).wFormContainer .wForm .wFormTitle
Title Text ColorColor of the form title.wFormContainer .wForm .wFormTitle


SECTION

Name of ControlDescription of ControlSelectors
Section Title FontFont-family for page titles within multi-page forms.wFormContainer .wForm .section.pageSection > h4,
     .wFormContainer .wForm .htmlSection h4,
    .wForm div.section > .preField
Font-family for section titles within forms.wFormContainer .wForm .section.pageSection > h4,
     .wFormContainer .wForm .htmlSection h4,
    .wForm div.section > .preField
Font-family for fieldset legends (titles) within forms#wFormResumePage legend,
    #responsePasswordResetform legend,
    .wFormContainer fieldset legend{
Section Title Font SizeFont-size for page title within multi-page forms. User can enter a numerical value in the text input, and then select a scaling unit (ex. px, em, rem, etc.).wFormContainer .wForm .section.pageSection > h4,
     .wFormContainer .wForm .htmlSection h4,
    .wForm div.section > .preField
Font-size for section titles within forms. User can enter a numerical value in the text input, and then select a scaling unit (ex. px, em, rem, etc.).wFormContainer .wForm .section.pageSection > h4,
     .wFormContainer .wForm .htmlSection h4,
    .wForm div.section > .preField
Font-size for fieldset legends (titles) within forms. User can enter a numerical value in the text input, and then select a scaling unit (ex. px, em, rem, etc.)#wFormResumePage legend,
    #responsePasswordResetform legend,
    .wFormContainer fieldset legend{
Section Title Text ColorText color for page title within multi-page forms.wFormContainer .wForm .section.pageSection > h4
Text color for section title within forms.wFormContainer .wForm .htmlSection h4
Text color for fieldset legends (titles) within forms#wFormResumePage legend,
    #responsePasswordResetform legend,
    .wFormContainer fieldset legend{
Text color of the month and year of the pop-up calendarhtml .kalendae .k-calendar .k-caption
Text color of the Previous/Next Month/Year icon links in the pop-up calendarhtml .kalendae .k-calendar .k-btn-previous-month,
     html .kalendae .k-calendar .k-btn-next-month,
     html .kalendae .k-calendar .k-btn-previous-year,
     html .kalendae .k-calendar .k-btn-next-year,
     html .kalendae .k-calendar .k-btn-previous-month:hover,
     html .kalendae .k-calendar .k-btn-next-month:hover,
     html .kalendae .k-calendar .k-btn-previous-year:hover,
     html .kalendae .k-calendar .k-btn-next-year:hover 


FONTS

Name of ControlDescription of ControlSelectors
Main FontFont-family of all body copy/paragraph text.wFormContainer,
     .htmlSection .htmlContent span,
     .htmlSection .htmlContent
Font-family of all input labels.wFormContainer .label,
     .oneField .label span
Font-family of the pop-up calendarhtml .kalendae
Main Text SizeFont-size of all body copy/paragraph text.wFormContainer,
     table
Font-size of all input labels
Font-size of all input text
Main Text ColorText color of all body copy/paragraph text.wFormContainer .wForm,
     .reviewHeader,
     .reviewResponse,
     .reviewFooter,
     .htmlSection .htmlContent span,
     .htmlSection .htmlContent,
     .wFormContainer fieldset > fieldset:last-child,
     .wFormContainer table.matrixLayout thead tr.headerRow th,
     .wFormContainer table.gridLayout thead tr.headerRow th,
     .wFormContainer table.matrixLayout tbody tr th.headerCol,
     .wFormContainer table.gridLayout tbody tr th.headerCol
Text color of all input labels .label,\n .wFormContainer .label,\n .wFormContainer .label.preField,\n .wFormContainer .oneChoice .label.postField,\n .oneField .label span,\n .wFormContainer .wForm .inputWrapper input[type='file'] "}">.wFormContainer .group > .label,
     .wFormContainer .label,
     .wFormContainer .label.preField,
     .wFormContainer .oneChoice .label.postField,
     .oneField .label span,
     .wFormContainer .wForm .inputWrapper input[type='file']  
Text color of the days of the pop-up calendarhtml .kalendae .k-calendar .k-title,
     html .kalendae .k-calendar .k-header,
     html .kalendae .k-calendar .k-days,
     html .kalendae .k-calendar .k-header span
Text color of the out-of-month dates (dates outside of the currently selected month)html .kalendae .k-calendar .k-days span.k-out-of-month
Link Text ColorColor of all links that occur within the form..wFormContainer a,
     .wFormContainer a:hover,
     .wForm :link,
     .wFormContainer .duplicateSpan a
Exceptions
     Polar and Tag Themes Only -  Text color of the links in the page footer (ex. "Contact Information" and "Your Rights Under GDPR") 
.wFormContainer .wFormFooter .supportInfo a,
     .wFormContainer .wFormFooter .supportInfo a:hover
Hint Text ColorText color of the character count.wFormContainer .lengthIndicator

Text color of the word count.wFormContainer .count-words

Text color of hint text.wForm .field-hint-inactive .hint,
     .wForm .hintsBelow .field-hint,
     .wform .hintsSide .field-hint


ERRORS

Name of ControlDescription of ControlSelectors
Error Color        Color of the Required Field markers.wFormContainer .reqMark:after
Border color of the field input border for fields that have an error on form submit.wFormContainer .oneField.errFld .inputWrapper input[type='text'],
     .wFormContainer .oneField.errFld .inputWrapper input[type='password'],
     .wFormContainer .oneField.errFld .inputWrapper textarea,
     .wFormContainer .oneField.errFld .inputWrapper select,
     .wFormContainer .oneField.errFld .inputWrapper input[type="text"].required
Text color of the field error message for fields that have an error on form submit.wFormContainer .oneField.errFld div.errMsg
Border color of the navigation tab for page(s) that contain field error(s) on form submit.wfTab.wfTabCurrentPage.errMsg,
     .wfTab.errMsg
Text color of form error messages, located at the top of the page.errorMessage,
     a.errMsg


INPUTS

Name of ControlDescription of ControlSelectors
Input Border RadiusBorder radius of the Review Page Header, Responses, and Footer Sections.reviewHeader,
     .reviewResponse,
     .reviewFooter
Border radius of all inputs.saveAndResume input[type='text'],
     .saveAndResume input[type='password'],
     .required,
     .wFormContainer .wForm .inputWrapper input[type='text'],
     .wFormContainer .wForm .inputWrapper input[type='password'],
     .wFormContainer .wForm .inputWrapper select,
     .wFormContainer .wForm .inputWrapper textarea
Border radius of fieldset borders.wFormContainer fieldset
Border radius of all buttons.wFormContainer .actions .primaryAction,
     .wFormContainer .actions .primaryAction:disabled,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Border radius of page navigation tabs (Exceptions: Does not apply to Demo, Lightning, and Polar themes).wFormContainer .wfTab,
       .wFormContainer .wfTab:hover 
Input Text FontFont-family for all input text.saveAndResume input[type='text'],
     .saveAndResume input[type='password'],
     .required,
     .wFormContainer .wForm .inputWrapper input[type='text'],
     .wFormContainer .wForm .inputWrapper input[type='password'],
     .wFormContainer .wForm .inputWrapper select,
     .wFormContainer .wForm .inputWrapper textarea,
     .wFormContainer .wForm .inputWrapper select option,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):read-only,
     .wFormContainer .wForm .inputWrapper textarea:read-only,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):-moz-read-only,
     .wFormContainer .wForm .inputWrapper textarea:-moz-read-only,
     .wform .readonly
Input Text ColorText color for all input text .input-radio-faux::before,\n .wFormContainer .wForm .inputWrapper input[type=\"checkbox\"]:checked + .label > .input-checkbox-faux::before,\n .tt-menu"}">.saveAndResume input[type='text'],
     .saveAndResume input[type='password'],
     .required,
     .wFormContainer .wForm .inputWrapper input[type='text'],
     .wFormContainer .wForm .inputWrapper input[type='password'],
     .wFormContainer .wForm .inputWrapper select,
     .wFormContainer .wForm .inputWrapper textarea,
     .wFormContainer .wForm .inputWrapper textarea:focus,
     .wFormContainer .wForm .inputWrapper textarea.required:focus,
     .wFormContainer .wForm .inputWrapper input[type='text']:focus,
     .wFormContainer .wForm .inputWrapper input[type='text'].required:focus,
     .wFormContainer .wForm .inputWrapper input[type='password']:focus,
     .wFormContainer .wForm .inputWrapper input[type='password'].required:focus,
     .wFormContainer .wForm .inputWrapper select:focus,
     .wFormContainer .wForm .inputWrapper select.required:focus,
     .wFormContainer .wForm .inputWrapper .oneChoice .input-checkbox-faux:before,
     .wFormContainer .wForm .inputWrapper input[type="radio"]:checked + .label > .input-radio-faux::before,
     .wFormContainer .wForm .inputWrapper input[type="checkbox"]:checked + .label > .input-checkbox-faux::before,
     .tt-menu
Exceptions
     Lightning only - Text color of the links in the page footer   
.wFormContainer .wFormFooter .supportInfo a,
     .wFormContainer .wFormFooter .supportInfo a:hover
Input Background ColorBackground color for all inputs .input-radio-faux::before,\n .wFormContainer .wForm .inputWrapper input[type=\"checkbox\"]:checked + .label > .input-checkbox-faux::before,\n .wFormContainer .wfAutosuggest.tt-input,\n .tt-menu"}">.saveAndResume input[type='text'],
     .saveAndResume input[type='password'],
     .required,
     .wFormContainer .wForm .inputWrapper input[type='text'],
     .wFormContainer .wForm .inputWrapper input[type='password'],
     .wFormContainer .wForm .inputWrapper select,
     .wFormContainer .wForm .inputWrapper textarea,
     .wFormContainer .wForm .inputWrapper .oneChoice .input-checkbox-faux:before,
     .wFormContainer .wForm .inputWrapper input[type="radio"]:checked + .label > .input-radio-faux::before,
     .wFormContainer .wForm .inputWrapper input[type="checkbox"]:checked + .label > .input-checkbox-faux::before,
     .wFormContainer .wfAutosuggest.tt-input,
     .tt-menu
Input Border ColorBorder color for all inputs .input-radio-faux::before,\n .wFormContainer .wForm .inputWrapper input[type=\"checkbox\"]:checked + .label > .input-checkbox-faux::before,\n .wFormContainer .wfAutosuggest.tt-input"}">.saveAndResume input[type='text'],
     .saveAndResume input[type='password'],
     .required,
     .wFormContainer .wForm .inputWrapper input[type='text'],
     .wFormContainer .wForm .inputWrapper input[type='password'],
     .wFormContainer .wForm .inputWrapper select,
     .wFormContainer .wForm .inputWrapper textarea,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):read-only.
     .wFormContainer .wForm .inputWrapper textarea:read-only,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):-moz-read-only,
     .wFormContainer .wForm .inputWrapper textarea:-moz-read-only,
     .wFormContainer .wForm .inputWrapper input[type="radio"]:checked + .label > .input-radio-faux::before,
     .wFormContainer .wForm .inputWrapper input[type="checkbox"]:checked + .label > .input-checkbox-faux::before,
     .wFormContainer .wfAutosuggest.tt-input
Border color for the pop-up calendar outer borderhtml .kalendae
Border color for the pop-up calendar dates when hoveredhtml .kalendae .k-calendar .k-days span.k-active:hover
Exceptions
     Cotton Candy and Sky Themes Only - Border color of buttons
     Cotton Candy and Sky Themes Only - Border color of page navigation tabs
.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton,
     .wFormContainer .wfTab
Read Only Text ColorText color for all read-only inputs (calculation fields and fields marked as no-overwrite with a default value set).wFormContainer .wForm .inputWrapper input:not([type="file"]):read-only,
     .wFormContainer .wForm .inputWrapper textarea:read-only,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):-moz-read-only,
     .wFormContainer .wForm .inputWrapper textarea:-moz-read-only
Read Only Background ColorBackground color for all read-only inputs (calculation fields and fields marked as no-overwrite with a default value set).wFormContainer .wForm .inputWrapper input:not([type="file"]):read-only,
     .wFormContainer .wForm .inputWrapper textarea:read-only,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):-moz-read-only,
     .wFormContainer .wForm .inputWrapper textarea:-moz-read-only
Read Only Border ColorBorder color for all read-only inputs (calculation fields and fields marked as no-overwrite with a default value set).wFormContainer .wForm .inputWrapper input:not([type="file"]):read-only,
     .wFormContainer .wForm .inputWrapper textarea:read-only,
     .wFormContainer .wForm .inputWrapper input:not([type="file"]):-moz-read-only,
     .wFormContainer .wForm .inputWrapper textarea:-moz-read-only


BUTTONS

Name of ControlDescription of ControlSelectors
Button FontFont-family for all button text.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Button Font SizeFont-size for all button text.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Button Text ColorText color of page navigation tabs.wFormContainer .wfTab
Background color of the current page of the page navigation tabs.wFormContainer .wfTab.wfTabCurrentPage
Text color of the pop-up calendar dates within the active month (month currently selected)html .kalendae .k-calendar .k-days span.k-in-month.k-active
Text color of the pop-up calendar selected date (inside or outside of active month)html .kalendae .k-calendar .k-days span.k-selected.k-active
Text color of button text.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Exceptions
     Demo - Navigation Tab Text Color is controlled by Btn Hover Text Color
     Demo and Lightning - Current page navigation tab background color is controlled by Main Text Color
     Lightning Theme Only - Text color of the emphasized fieldset legends (title)
     Polar and Tag Themes Only - Border color of buttons 

Button Background ColorBackground color of page navigation tabs.wFormContainer .wfTab
Background color of the pop-up calendar dates within the active month (month currently selected)html .kalendae .k-calendar .k-days span.k-in-month.k-active
Background color of the pop-up calendar selected date (inside or outside of active month)html .kalendae .k-calendar .k-days span.k-selected.k-active
Background color of buttons.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Exceptions    
     Lightning only - Background color of emphasized fieldset header
.wFormContainer fieldset.highlighted legend
Button Hover Text ColorText color of the page navigation tab on hover.wFormContainer .wfTab:hover
Text color of the buttons on hover.wFormContainer .actions .primaryAction:hover,
     .wFormContainer .wfPagingButtons .wfPageNextButton:hover,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton:hover
Exceptions
     Tag only - Text color of the duplicate field link (ex: "Add Another Response," "Remove")
     Demo only - Text color of the page navigation tab
     Lightning only - Text color of the current page tab of the page navigation
Tag Only -
     .wFormContainer .duplicateSpan a:hover
Demo Only -
     .wFormContainer .wfTab
Lightning Only -
     .wFormContainer .wfTab.wfTabCurrentPage     
Button Hover Background ColorBorder color of the current page navigation tab.wFormContainer .wfTab.wfTabCurrentPage
Background color of the page navigation tab on hover.wFormContainer .wfTab:hover
Background color of the buttons on hover.wFormContainer .actions .primaryAction:hover,
     .wFormContainer .wfPagingButtons .wfPageNextButton:hover,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton:hover
Exceptions
     Tag only - Background color of the duplicate field link (ex: "Add Another Response," "Remove")

     Tag only - Border color of the page navigation tab

     Tag only - Border color of the buttons on hover

     .wFormContainer .duplicateSpan a:hover

     .wFormContainer .wfTab

     .wFormContainer .wfTab.wfTabCurrentPage  
Button Padding Top Bottom                Top and bottom padding for buttons.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Button Padding Left RightLeft and right padding for buttons.wFormContainer .actions .primaryAction,
     .wFormContainer .wfPagingButtons .wfPageNextButton,
     .wFormContainer .wfPagingButtons .wfPagePreviousButton
Terms of Service · Privacy Policy