Styler

The Styler allows you to design an unlimited number of styles that can be applied to any WordPress form built with WS Form with ease. Whether you want to maintain consistent branding across your WordPress site or tailor the appearance of individual forms for specific purposes, the Styler offers the flexibility to create, design, and manage styles effortlessly.

For developers, the Styler provides access to over 400 customizable settings, all easily managed using CSS variables for maximum flexibility and control. For beginners, creating styles is a breeze with intuitive options for adjusting colors, sizes, and other design elements, no coding required.

What is a Style?

A style in WS Form is a structured hierarchy of CSS variables, beginning with high-level settings like the color palette and typography. These foundational elements cascade down to progressively more specific settings, including sections, fields, and even individual field types, ensuring a consistent and customizable design throughout your forms.

How to Edit a Style

There are two ways to open the Styler to edit a style.

To edit a style, click Edit on the Styles admin page. This opens the Styler, displaying a sample form with fields that allow you to preview most Styler settings in real time.

WS Form - Styler - Admin Table - Edit Link

Click the Style icon at the top of the form layout editor. This opens your form alongside the Styler, allowing you to customize its appearance seamlessly.

Quick Start: The Form Category

The Form category in the Styler can be used to change the majority of the styling in a form and provides a quick way of getting the bulk of your form styled. For example, changing the Base color will change other elements on the form such as label colors, help text and input colors automatically.

WS Form - Styler - Form Category

The Form category includes the following style settings:

Sub Category	Setting	Type	Default	Description
Border	Color	Color	`transparent`	The border color. Learn more.
	Radius	Size	`0px`	The border radius. Learn more.
	Width	Size	`0px`	The border width. Learn more.
	Style	Text	`solid`	The border style. Learn more.
Color Palette	Background	Color	`transparent`	The form background color.
	Base	Color	`#000000`	Main color used for labels, inputs and help text.
	Base – Contrast	Color	`#ffffff`	Contrast color used for checkmarks, button text, etc.
	Accent	Color	`#205493`	Used for checked and styled checkboxes and radio fields, range slider thumb, etc.
	Neutral	Color	`#767676`	Used for neutral tones on the form such as the file upload button.
	Primary	Color	`#205493`	Used for the form submit button and any elements configured to use the Primary color.
	Secondary	Color	`#5b616b`	Default color used for other buttons.
	Success	Color	`#2e8540`	Used for success messages.
	Information	Color	`#02bfe7`	Used for information messages.
	Warning	Color	`#fdb81e`	Used for warning messages.
	Danger	Color	`#bb0000`	Used for error messages and invalid feedback.
Spacing	Grid Gap	Size	`20px`	The spacing between fields.
	Padding – Horizontal	Size	`0px`	Horizontal form padding.
	Padding – Vertical	Size	`0px`	Vertical form padding.
Transition	Speed	Text	`200ms`	The time for transitions it takes for general transitions to run on the form.
	Timing Function	Text	`ease-in-out`	The CSS timing function used for transitions. Learn more
Typography	Font Family	Text	`inherit`	The base font family used throughout the form.
	Font Size	Size	`16px`	The base font size used throughout the form.
	Font Size – Small	Size	`14px`	This is primarily used on field help text.
	Font Size – Large	Size	`18px`	This is primarily used on legends.
	Font Style	Text	`inherit`	Defines italic or normal text style. Learn more.
	Font Weight	Text	`inherit`	Controls text boldness or lightness. Learn more.
	Letter Spacing	Text	`inherit`	Adjusts space between text characters. Learn more.
	Line Height	Sixe	`1.4`	Sets spacing between text lines. Learn more.
	Text Decoration	Text	`inherit`	Adds lines, styles, or colors. Learn more.
	Text Transform	Text	`inherit`	Changes text casing styles. Learn more.

These settings may vary slightly for conversation styles where font sizes and spacing are increased for legibility.

How to Save a Style

Once you have finished making changes to a style, click the Save icon. This will immediately publish the style ready for use on the website.

The Styler Sidebar

The Styler will open on the left and side of your form by default.

WS Form - Styler - Diagram

Style Name

The Style Name is shown at the top of the Styler. To edit the style name click the Settings icon at the top, change the name, then click the Save icon.

Setting Search

You can search for settings in a variety of ways:

Variables (e.g. --wsft-form-color-background)
Variable names (e.g. button primary)
Category names (e.g. typography)

Simply enter keywords into the search (minimum 2 characters) and the setting hierarchy will be filtered.

Style Categories

The top level style categories are:

Form
Tab
Section
Field
Field Type
Conversational (Only for conversation forms)

To open a category and view the sub-categories click the category name.

Use the Form category to change the main colors, sizes and typography settings for your form.

For more granular control, browse the other top level categories or use the Setting Search to find a particular setting.

Style Setting

There are various types of Style Setting.

Color

Color settings allow you to pick any color for a form element.

WS Form - Styler - Setting - Color

To use the color picker to choose a color, simply click the Swatch.

The following values can be entered into the color Setting Value.

Color Model	Example	Description
Hex	`#ff0000`	Hexadecimal as `#rrggbb`.
Hex 8	`#ff000088`	Hexadecimal with alpha as `#rrggbbaa`.
RGB	`rgb(255, 0, 0)`	Red, green, blue as `rgb(r, g, b)`.
RGBA	`rgba(255, 0, 0, 0)`	Red, green, blue, alpha as `rgba(r, g, b, a)`.
HSL	`hsl(0, 100%, 50%)`	Hue, saturation and lightness as `hsl(h, s, l)`.
HSLA	`hsla(0, 100%, 50%, 0.533)`	Hue, saturation and lightness as `hsla(h, s, l, a)`.
var()	`var(--accent-color)`	CSS variable.

The Color Attribute (CSS Tricks)

Size

Size settings allow you to set the size of a form element.

WS Form - Styler - Setting - Size The following values can be entered into the color Setting Value.

Unit of Measurement	Example	Type	Description
px	`16px`	Absolute	Pixels: A fixed unit, most commonly used.
em	`1.5em`	Relative	Relative to the font size of the element.
rem	`1.5rem`	Relative	Root em: Relative to the font size of the root element.
%	`90%`	Relative	Percentage: Relative to the parent element’s size.
var()	`var(--font-size-base)`		CSS variable.

We recommend a base pixels size of at least 16 pixels to help with the accessibility of your form.

Other Settings

Other settings include:

Font family
Font style
Font weight
Text decoration
Text transform

These values have text inputs that support a CSS value or variable.

Style Undo

Any changes made during a given editing session can be undone by clicking the Style Undo icon. This will reset all of the settings in the style those the values that were present when the Styler was opened.

If you want to fully reset a style to the system defaults, you can do that from the Styles admin page by clicking the Reset link.

Settings

The settings panel allows you change the style name and also enable the alternative colors scheme. To access the settings panel click the Settings icon.

Save

The Save icon is used to publish the changes you have made to the style so that they are committed to the live version of any form using that style.

If you are making significant changes to a style, consider cloning it or exporting a backup prior to doing so.

Repositioning the Styler

You can temporarily move the Styler by clicking and dragging the WS Form logo. If the Styler is position at the left or right of the screen, WS Form will attempt to lock it in position and introduce left or right margin to the body element to provide you with a better view of your form.