Customize Appearance

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:

  1. Click on ‘Appearance’ in the WordPress administration menu.
  2. Click ‘Customize’ in the sub menu. This will open up the WordPress customization screen.
  3. 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.

WS Form PRO - Customize Appearance

The available customization settings are as follows:

Colors

SettingDescriptionDefault
DefaultMain color used for fonts and borders.#000000
Default InvertedA color that contrast the default color.#FFFFFF
Default LightA light version of the default color.#8E8E93
Default LighterA lighter version of the default color.#CECED2
Default LightestThe lightest version of the default color.#EFEFF4
PrimaryUsed for primary elements such as a submit button.#007AFF
SecondaryUsed for secondary elements such as a reset button.#5856D9
SuccessUsed for success messages.#4CD964
InformationUsed for information messages.#5AC8FA
WarningUsed for warning messages.#FFCC00
DangerUsed for danger messages.#FF3B30

Typography

SettingDescriptionDefault
Font FamilyFont family used throughout the form.-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Font SizeRegular font size used on the form.14
Font Size LargeLarge font size used on the form.16
Font Size SmallSmall font size used on the form.12
Line HeightLine height used throughout form.1.4

Borders

SettingDescriptionDefault
EnabledWhen checked, borders will be shown.1
WidthSpecify the width of borders used through the form. For example, borders around form fields.1
StyleBorder style used throughout the form.solid
RadiusBorder radius used throughout the form.4

Transitions

SettingDescriptionDefault
EnabledWhen checked, transitions will be used on the form.1
SpeedTransition speed in milliseconds.200
Timing FunctionSpeed curve of the transition effect.ease-in-out

Advanced

SettingDescriptionDefault
Enable FlexboxWhen enabled, form elements will be better laid out on the page by using Flexbox.1
Inline-Block Letter SpacingSpace between inline-block elements.-4
Unit of MeasurmentSelect px, rem or em as the unit of measurement used throughout the form.px
Grid GutterSets the distance between form elements.20