How to Customize Appearance – WS Form

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
DefaultLabels and field values.#000000
InvertedField backgrounds and button text.#ffffff
LightPlaceholders, help text, and disabled field values.#767676
LighterField borders and buttons.#ceced2
LightestRange slider backgrounds, progress bar backgrounds, and disabled field backgrounds.#efeff4
PrimaryCheckboxes, radios, range sliders, progress bars, and submit buttons.#205493
SecondarySecondary elements such as a reset button.#5b616b
SuccessCompleted progress bars, save buttons, and success messages.#2e8540
InformationInformation messages.#02bfe7
WarningWarning messages.#fdb81e
DangerRequired field labels, invalid field borders, invalid feedback text, remove repeatable section buttons, and danger messages.#bb0000

Typography

SettingDescriptionDefault
Font FamilyFont family used throughout the form.inherit
Font SizeRegular font size used on the form.14
Font Size LargeFont size used for section labels and fieldset legends.25
Font Size SmallFont size used for help text and invalid feedback text.12
Font WeightFont weight used throughout the form.inherit
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
Grid GutterSets the distance between form elements.20
Inside Label BehaviorSelect the behavior of the label if content is present in a field.move
Inside Label Vertical OffsetHow many pixels to move the label vertically if content is present in a field.-20
Inside Label ScaleWhat factor to scale the label by if content is present in a field.0.9