The WS Form customize appearance feature allows you to edit the colors, fonts, and other style elements of your form in much the same way you would change the style of your website theme.
Tip: The customize appearance feature only applies if you are using the WS Form framework. To find out what framework you are using, click on the Appearance tab in the Settings administration page.
To access the style editor:
- Click on Appearance in the WordPress administration menu.
- Click Customize in the sub menu. This will open up the WordPress customization screen.
- Click WS Form on the left.
This will start the WS Form customize feature. You will see a preview of a form on the right side and various customize options on the left.
The available customization settings are as follows:
Colors
| Setting | Description | Default |
|---|---|---|
| Default | Labels, field values, and help text. | #000000 |
| Inverted | Field backgrounds and button text. | #ffffff |
| Light | Placeholders and disabled field values. | #767676 |
| Lighter | Field borders and buttons. | #ceced2 |
| Lightest | Range slider backgrounds, progress bar backgrounds, and disabled field backgrounds. | #efeff4 |
| Primary | Checkboxes, radios, range sliders, progress bars, and submit buttons. | #205493 |
| Secondary | Secondary elements such as a reset button. | #5b616b |
| Success | Completed progress bars, save buttons, and success messages. | #2e8540 |
| Information | Information messages. | #02bfe7 |
| Warning | Warning messages. | #fdb81e |
| Danger | Required field labels, invalid field borders, invalid feedback, remove repeatable section buttons, and danger messages. | #bb0000 |
| Form Background | Leave blank for none. | |
Typography
| Setting | Description | Default |
|---|---|---|
| Font Family | Font family used throughout the form. | inherit |
| Font Size | Regular font size used on the form. | 16 |
| Font Size Large | Font size used for section labels and fieldset legends. | 18 |
| Font Size Small | Font size used for help text and invalid feedback text. | 14 |
| Font Weight | Font weight used throughout the form. | inherit |
| Line Height | Line height used throughout form. | 1.4 |
Borders
| Setting | Description | Default |
|---|---|---|
| Enabled | When checked, borders will be shown. | Enabled |
| Width | Specify the width of borders used through the form. For example, borders around form fields. | 1 |
| Style | Border style used throughout the form. | solid |
| Radius | Border radius used throughout the form. | 4 |
Box Shadows
| Setting | Description | Default |
|---|---|---|
| Enabled | When checked, box shadows will be shown. | Enabled |
| Width | Specify the width of box shadows used through the form. For example, box shadows around focused form fields. | 2 |
| Opacity | Specify the opacity of box shadows used through the form. (e.g. 0 is fully transparent and 1 is fully opaque) | 1 |
Transitions
| Setting | Description | Default |
|---|---|---|
| Enabled | When checked, transitions will be used on the form. | Enabled |
| Speed | Transition speed in milliseconds. | 200 |
| Timing Function | Speed curve of the transition effect. | ease-in-out |
Advanced
| Setting | Description | Default |
|---|---|---|
| Grid Gutter | Sets the distance between form elements. | 20 |
| Spacing | Spacing used for section legends, checkboxes, and radios | 10 |
| Spacing Small | Spacing used for field labels, help text, invalid feedback, ratings, and section icons. | 5 |
| Inside Label Behavior | Select the behavior of the label if content is present in a field. | move |
| Inside Label Vertical Offset | How many pixels to move the label vertically if content is present in a field. | -20 |
| Inside Label Scale | What factor to scale the label by if content is present in a field. | 0.9 |
Conversational
| Setting | Description | Default |
|---|---|---|
| Form Maximum Width | Sets the max width of the conversational form. | |
| Background Color | Leave blank for none. | |
| Navigation Background Color | Leave blank for none. | |
| Navigation Foreground Color | Leave blank for none. | |
| Inactive Section Opacity | Leave blank for none. | |