Celebrate WordCamp Asia 2024 with 30% OFF! Use coupon WC30 - Terms

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, remove repeatable section buttons, and danger messages.#bb0000
Form BackgroundLeave blank for none.

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.18
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.Enabled
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

Box Shadows

SettingDescriptionDefault
EnabledWhen checked, box shadows will be shown.Enabled
WidthSpecify the width of box shadows used through the form. For example, box shadows around focused form fields.4
OpacitySpecify the opacity of box shadows used through the form. (e.g. 0 is fully transparent and 1 is fully opaque)0.25

Transitions

SettingDescriptionDefault
EnabledWhen checked, transitions will be used on the form.Enabled
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
SpacingSpacing used for section legends, checkboxes, and radios10
Spacing SmallSpacing used for field labels, help text, invalid feedback, ratings, and section icons.5
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.-19
Inside Label ScaleWhat factor to scale the label by if content is present in a field.0.9

Conversational

SettingDescriptionDefault
Form Maximum WidthSets the max width of the conversational form.
Background ColorLeave blank for none.
Navigation Background ColorLeave blank for none.
Navigation Foreground ColorLeave blank for none.
Inactive Section OpacityLeave blank for none.