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:


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.#205493
SecondaryUsed for secondary elements such as a reset button.#5b616b
SuccessUsed for success messages.#2e8540
InformationUsed for information messages.#02bfe7
WarningUsed for warning messages.#fdb81e
DangerUsed for danger messages.#981b1e


Font FamilyFont family used throughout the form.inherit
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
Font WeightFont weight used throughout the form.inherit
Line HeightLine height used throughout form.1.4


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


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


Grid GutterSets the distance between form elements.20