Style

Documentation Home

What is Style?

Style allows you to customize your form's appearance. 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.

Themes and Customization

Use the "Themes" tab to select a pre-made theme for your form. Selecting a theme will replace 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

Advanced users with CSS knowledge may use the "Advanced" tab to directly edit the CSS style. Existing CSS can be modified or additional CSS can be added.

NOTE: FormSite cannot provide any support assistance for advanced editing and cannot guarantee that custom CSS will work as expected in all cases. You are 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, Internet Explorer, or Safari.

classdescription
.form_tableForm area.
.form_table aA link, inside the form area.
.qForm item container.
.q .questionItem question text.
.q .drop_downSelect (dropdown) input.
.q .file_uploadFile input.
.q .text_fieldText input.
.q .matrixMatrix item table.
.q .rating_rankingRating or Ranking item table.
.segment_headerA Segment Heading item heading.
.highlightItem highlight.
.outside_containerContent outside (above/below) the form area.
.outside_container .form_table aA link, outside the form area.
.outside_container .submit_buttonA button, outside the form area.

Additional Information

See our Responsive Forms guide for information regarding targeting mobile devices.

Text for buttons and labels can be customized on your form's "Form Settings->Custom Text" page.

Documentation Home