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 Control | Description of Control | Selectors |
| Logo Image | Allows for a logo image upload. Logo is placed in the page header, above the form. | .wFormContainer .wFormHeader |
| Logo Size | Logo 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 Position | Horizontal positioning of the logo image. Choices include left, center, and right. | .wFormContainer .wFormHeader |
BACKGROUND
| Name of Control | Description of Control | Selectors |
| Background Color | Background color of the page, behind the form. | .wFormWebPage |
| Form Background Color | Background 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 Color | Background 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 Control | Description of Control | Selectors |
| Form Border Color | Color of the form border. If no border is desired a color with 0 opacity can be chosen. | .wFormContainer .wForm, .reviewHeader, .reviewResponse |
| Form Fieldset Border Color | Color 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 Control | Description of Control | Selectors |
| Title Font | Font-family of the form title | .wFormContainer .wForm .wFormTitle |
| Title Font Size | Font-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 Color | Color of the form title | .wFormContainer .wForm .wFormTitle |
SECTION
| Name of Control | Description of Control | Selectors |
| Section Title Font | Font-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 Size | Font-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 Color | Text 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 calendar | html .kalendae .k-calendar .k-caption | |
| Text color of the Previous/Next Month/Year icon links in the pop-up calendar | html .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 Control | Description of Control | Selectors |
| Main Font | Font-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 calendar | html .kalendae | |
| Main Text Size | Font-size of all body copy/paragraph text | .wFormContainer, table |
| Font-size of all input labels | ||
| Font-size of all input text | ||
| Main Text Color | Text 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 calendar | html .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 Color | Color 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 Color | Text 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 Control | Description of Control | Selectors |
| 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 Control | Description of Control | Selectors |
| Input Border Radius | Border 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 Font | Font-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 Color | Text 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 Color | Background 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 Color | Border 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 border | html .kalendae | |
| Border color for the pop-up calendar dates when hovered | html .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 Color | Text 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 Color | Background 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 Color | Border 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 Control | Description of Control | Selectors |
| Button Font | Font-family for all button text | .wFormContainer .actions .primaryAction, .wFormContainer .wfPagingButtons .wfPageNextButton, .wFormContainer .wfPagingButtons .wfPagePreviousButton |
| Button Font Size | Font-size for all button text | .wFormContainer .actions .primaryAction, .wFormContainer .wfPagingButtons .wfPageNextButton, .wFormContainer .wfPagingButtons .wfPagePreviousButton |
| Button Text Color | Text 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 Color | Background 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 Color | Text 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 Color | Border 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 Right | Left and right padding for buttons | .wFormContainer .actions .primaryAction, .wFormContainer .wfPagingButtons .wfPageNextButton, .wFormContainer .wfPagingButtons .wfPagePreviousButton |