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 require additional assistance with CSS, please see our Custom Project Development page.
In this article we cover:
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: #fff; }
Fields
CSS selector: wsf-field
Example of giving fields a white background and black text:
.wsf-form .wsf-field-wrapper .wsf-field { background: #fff; color: #000; }
Placeholders
CSS selector: wsf-field::placeholder
Example of making placeholder text gray:
.wsf-form .wsf-field-wrapper .wsf-field::placeholder { color: #999; }
Help Text
CSS selector: wsf-help
Example of making help text white:
.wsf-form .wsf-field-wrapper .wsf-help { color: #fff; }
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.
The class(es) entered will be added to that specific section.
Learning CSS
Here are some great online resources for learning CSS: