Styling Forms with CSS

Most styling of a form can be achieved using our responsive layout editor and customize tools, but sometimes you will want to apply more granular styling using some custom CSS (Cascading Style Sheet). This article describes how to use CSS to style forms created with WS Form.

If you need help understanding he HTML attributes used by WS Form, please see our HTML Form Attributes article.

If you require additional assistance understanding CSS, please see our Custom Project Development article.

Basic Examples
Targeting Forms
Adding Classes to a Form
Setting the Form ID in a Shortcode
Learning CSS

Basic Examples

The following examples are for use with the WS Form framework. If you are using Bootstrap or Foundation please refer to the documentation for those frameworks.

Labels

CSS selector: wsf-label

Example of making all labels white:

.wsf-form .wsf-field-wrapper .wsf-label {
    color: #FFFFFF;
}

Fields

CSS selector: wsf-field

Example of giving fields a white background and black text:

.wsf-form .wsf-field-wrapper .wsf-field {
    background: #FFFFFF;
    color: #000000;
}

Buttons

CSS selector: wsf-button

Example of making buttons red with white text:

.wsf-form .wsf-field-wrapper .wsf-button {
    background: #FF0000;
    color: #FFFFFF;
}

Placeholders

CSS selector: wsf-field::placeholder

Example of making placeholder text gray:

.wsf-form .wsf-field-wrapper .wsf-field::placeholder {
    color: #999999;
}

Help Text

CSS selector: wsf-help

Example of making help text white:

.wsf-form .wsf-field-wrapper .wsf-help {
    color: #FFFFFF;
}

Targeting Forms

WS Form supports multiple forms per page. Each form on the page is called an instance.

Each instance on the page is given a unique ID. For example:

<form id="ws-form-1" data-id="123" class="wsf-form">

Let’s break those attributes down.

The id attribute is a unique identifier for the form. It has the format ws-form-<instance_id>. In this example it is referencing instance 1.

The data-id attribute indicates which form ID is being rendered. In this example it is rendering form ID 123.

The class attribute wsf-form appears on all forms. You can use it to target all forms rendered by WS Form.

Selector Examples

.wsf-form Target all forms.

form[data-id="123"] Target form ID 123 on any page.

#ws-form-1 Target the first instance of a form on any page.

Adding Classes to a Form

It is also possible to add classes to form elements so that you can target them with your own CSS.

Form

To add a class to the form.

Click the settings icon at the top of the layout editor.
Click the Styling tab in the sidebar.
In the Classes settings enter a class name in the Form Wrapper setting.

Tabs (All)

Tabs are made up two components, the tab itself and the tab content. To add a class to these components:

Click the settings icon at the top of the layout editor.
Click the Styling tab in the sidebar.
In the Classes settings enter a class name in the Tab Wrapper or Tab Content Wrapper setting.

The class(es) entered will be added to all tabs in the form.

Tabs (Individual)

If you have more than one tab in your form, you can also add a class each tab content individually. To do this:

Click the settings icon for a specific tab in the layout editor.
Click the Advanced tab in the sidebar.
In the Classes settings enter a class name in the Tab Content Wrapper setting.

The class(es) entered will be added to the content for that tab.

Sections (All)

To add a class to all sections in your form:

Click the settings icon at the top of the layout editor.
Click the Styling tab in the sidebar.
In the Classes settings enter a class name in the Section Wrapper setting.

The class(es) entered will be added to all sections in the form.

Section (Individual)

To add a class to a specific section in your form:

Click the settings icon for a specific section in the layout editor.
Click the Advanced tab in the sidebar.
In the Classes settings enter a class name in the Section Wrapper setting.

The class(es) entered will be added to that specific section.

Fields (All)

Fields are made up of a wrapper and the field itself. To add wrapper or field classes to all fields on your form:

Click the settings icon at the top of the layout editor.
Click the Styling tab in the sidebar.
In the Classes settings enter a class name in the Field Wrapper or Field setting.

The class(es) entered will be added to all fields in the form.

Field (Individual)

To add a class to a specific field in your form:

Click the settings icon for a specific section in the layout editor.
Click the Advanced tab in the sidebar.
In the Classes settings enter a class name in the Field Wrapper or Field setting.