Styles

WS Form styles consist of settings such as colors, typography and sizes to control how your forms look on your website.

This article explains how to add, manage and delete styles.

To learn how to about editing a style (i.e. changing colors, fonts etc), check out our Styler article.

You can add as many styles to your website as needed. Each style can be assigned to as many different forms as you wish. One style is designated as the Default style. All newly created forms will be assigned to that default style.

Accessing Styles

To access the styles, click on Styles from the WS Form admin menu.

WS Form - Styler - Admin Menu

The Styler admin page lists all of the styles you have created in WS Form.

WS Form - Styler - Admin Page

Default Styles

The default styles created when you first install or upgrade WS Form are as follows:

  • Standard – Light
    A dark on light style suitable for all standard forms.
  • Conversational – Light
    A dark on light style suitable for conversational forms.

Style templates also exists for light on dark themes to speed up for styling of sites that have a dark background with light text.

Editing Styles

To edit a style, click the Style Name or the Edit link when hovering over the style. This will take you to the WS Form Styler.

Add Additional Styles

If you need to apply unique styling to a specific form, such as one located in the site footer, you can easily create a custom style for it.

To do this, simply click the Add New button at the top of the Styles admin page. This will redirect you to the Styles Template admin page, where you can choose from a starting template.

WS Form - Styler - Add Style From Template

The Standard – Light template is suitable for websites that have a light theme (dark text on a light background).

The Standard – Dark template is suitable for website that have a dark theme (light text on a dark background).

Each template shows a sample of the default colors. The colors shown on the template are:

  • Back – Background
  • Base – Base
  • Cont – Base – Contrast
  • Acc – Accent
  • Neut – Neutral
  • Pri – Primary
  • Sec – Secondary

One you have created a style, all of these colors can be changed in the WS Form Styler.

Assigning Styles to Forms

By default, all new forms are assigned to the Default style. You can also choose a specific style for a form as follows:

  1. Click the Form Settings  icon at the top of the layout editor.
  2. Click the Styling tab.
  3. Choose a style from the Style setting.
  4. Click Save & Close.
  5. Click Publish if you want to publish the change immediately.

WS Form - Styler - Form Setting - Choose a Style

Managing Styles

On the Styles admin page, each style has options that can be clicked on beneath the style name.

WS Form - Styler - Admin Table Style Options

Each option is described below:

Edit

Click this to edit the theme using the Styler. To learn how to use the Styler see: Editing Styles

Clone

You can clone any style by clicking the Clone link.

Once you have cloned a style you can rename it as follows:

  1. Click Edit to edit the style.
  2. Click the Settings  icon at the top of the Styler.
  3. Change the Name then click the Save icon at the top of the Styler.

Trash

To move a style to the trash folder, click the Trash link. You can recover trashed styles if you need to, or permanently delete them.

Export

Any style can be exported by clicking the Export link. This provide a file in JSON format that can then be imported into any other site with WS Form. To import a form export:

  1. Click Styles from the WordPress admin menu.
  2. Click the Import icon at the top of the Styler.
  3. Choose the export style JSON file.

Alternatively you can simply drag and drop the JSON file into the styles table.

Set as Default

New forms will use the Default style. When you modify the default style it will apply to any forms set to use the default style. To change which style is used as the default style, click the Set as Default link.

You can also add additional styles and apply those to specific forms if you wish.

When you click this link, any forms specifically assign to that style will be set to use the default style.

Set as Conversational (PRO Only)

If you are using conversational forms, they will use the Conversational style by default. When you modify the conversational style it will apply to any forms set to use the default conversational style. To change which style is used as the conversational style by default, click the Set as Conversational link.

You can also add additional conversational styles and apply those to specific forms if you wish.

When you click this link, any forms specifically assign to that style will be set to use the default conversational style.

Reset

Clicking the Reset link will set all of the style settings back to the WS Form defaults.

If the style is marked as the Conversational Default then it will revert to the conversational defaults.

CSS Variables