What is Style?
Style allows you to customize your form's appearance.
Themes and Customization
To get to your form's Style page, edit your form and click the "Style" button near the top of the editor. On the Style page, the settings are shown on the left and a live preview is shown on the right.
Use the "Themes" tab to select a built-in theme for your form. Selecting a theme will replace all your form's existing styles with the theme's styles. Alternately, you can copy the styles from another form by using the "Copy From Form" button near the top right.
Use the "Customize" tab to edit individual style settings. You can start with a theme and then further customize it. Settings are available to customize fonts, colors, borders, spacing, etc.
Advanced
If you're an advanced user with CSS knowledge, you can use the "Advanced" tab to directly edit the CSS style.
Note: Formsite cannot provide extra support assistance for advanced editing and cannot guarantee custom CSS will work as expected in all cases. You're responsible for testing your custom CSS in a variety of different browsers and situations.
Most modern browsers have developer tools that can assist in identifying CSS classes and their effects. For more information, see: Chrome, Firefox, Microsoft Edge, or Safari.
| CSS class | Description |
|---|---|
| .form_table | Form area |
| .form_table a | A link, inside the form area |
| .q | Form item container |
| .q .question | Item question text |
| .q .drop_down | Dropdown (select) input |
| .q .file_upload | File input |
| .q .text_field | Text input |
| .q .matrix | Matrix item table |
| .q .number_scale | Number Scale item |
| .q .rating_ranking | Rating or Ranking item table |
| .q .slider | Slider item |
| .segment_header | Heading item |
| .highlight | Item highlight |
| .outside_container | Content outside (above/below) the form area |
| .outside_container a | A link, outside the form area |
| .outside_container .submit_button | A button, outside the form area |
Additional Information
You can customize text colors and fonts individually in each form item, but it's best to use the Style page. For example, if you want all your items to have blue text, rather than editing each item and giving it blue text, go to the Style page and set the entire form's text to be blue. When an item has customized style, it overrides styles set on the Style page.
Text for buttons and labels can be also be customized, on your form's Custom Text page.