WS Form is a WordPress form plugin that supports features such as:
- Multiple forms per page, including multiple instances of the same form.
- Conditional logic
- Repeatable sections
- Calculated fields
…and more!
WS Form automatically assigns IDs to forms and fields to ensure all IDs are unique and to ensure that all functionality provided by the plugin works as intended.
Additionally, WS Form automatically adds custom data attributes and classes to all fields for the purpose of referencing different form elements with CSS and JavaScript.
This article explains how instances work and how form and field attributes are configured in WS Form.
Need help styling forms? Check out our Styling Forms with CSS article.
If you require additional assistance understanding form attributes, please see our Custom Project Development article.
Contents
Instances
Each form on a page is assigned an instance. The first form to render on the page is given an instance of 1. The second instance of a form is given an instance of 2, so on and so forth. By using instances, WS Form is able to render the same form multiple times on a page. For example, you might have a newsletter sign up at the top and bottom of a page.
Form Attributes
A simplified example of a form element generated by WS Form is as follows (we’ve removed some attributes for clarity):
<form id="ws-form-1" class="wsf-form" data-id="123" data-instance-id="1">
Lets run through each of these attributes in turn. Choose a tab to learn more.
id
The DOM element ID of a form is stored in an attribute called:
id
An example of this attribute is as follows:
id="ws-form-1"
The format of this attribute is follows:
id="ws-form-<instance_id>"
So, the first form rendered on a page (first instance) would have an ID of:
ws-form-1
You could reference this in CSS and JavaScript by using a selector such as:
#ws-form-1
If you only have one instance of a form on a page, the ID of the form can be changed. For example, the form shortcode can have an element_id attribute added to it. Other site builder elements also support the ability to change the ID in a setting if necessary. We generally recommend leaving WS Form to handle these IDs.
class
The form class is stored in an attribute called:
class
An example of this attribute is:
class="wsf-form"
All forms have a class of:
wsf-form
You could be reference this in CSS and JavaScript by using a selector such as:
.wsf-form
Adding Custom Form Classes
You can add custom classes to a form in the Form Settings > Styling (Tab) > Classes > Form Wrapper setting.
data-id
The actual form ID (i.e. the database ID of the form) is stored in a data attribute called:
data-id
An example of this attribute is:
data-id="123"
You could reference this in CSS and JavaScript by using a selector such as:
[data-id="123"]
… or a more specific example:
.wsf-form[data-id="123"]
data-instance-id
The instance of a form is stored in an attribute called:
data-instance-id
An example of this attribute is:
data-instance-id="1"
You could reference this in CSS and JavaScript by using a selector such as:
[data-instance-id="1"]
… or a more specific example:
.wsf-form[data-instance-id="1"]
Field Wrapper Attributes
Most fields in WS Form are contained within a wrapper. The wrapper provides the ability to style a field, as well as grouping elements such as checkbox or radio fields.
A simplified example of a field wrapper element generated by WS Form is as follows (we’ve removed some attributes for clarity):
<div id="wsf-1-field-wrapper-123" class="wsf-field-wrapper" data-id="123" data-type="checkbox">
Lets run through each of these attributes in turn. Choose a tab to learn more.
id
The DOM element ID of a field wrapper is stored in an attribute called:
id
And example of this attribute is:
id="wsf-1-field-wrapper-123"
The format of a field wrapper ID is as follows:
wsf-<instance_id>-field-wrapper-<field_id>
So, the first form rendered on a page (first instance), for field ID 5 would have an ID of:
wsf-1-field-wrapper-5
You could be reference this in CSS and JavaScript by using a selector such as:
#wsf-1-field-wrapper-5
class
The field wrapper class is stored in an attribute called:
class
An example of this attribute is:
class="wsf-field-wrapper"
All fields have a class of:
wsf-field-wrapper
You could be reference this in CSS and JavaScript by using a selector such as:
.wsf-field-wrapper
… or a more specific example:
.wsf-form .wsf-field-wrapper
Adding Custom Classes to All Field Wrappers
You can add custom classes to all field wrappers in the Form Settings > Styling (Tab) > Classes > Field Wrapper setting.
data-id
The actual field ID (i.e. the database ID of the field) is stored in a data attribute called:
data-id
An example of this attribute for field ID 123 is:
data-id="123"
You could reference this in CSS and JavaScript by using a selector such as:
[data-id="123"]
… or a more specific example:
.wsf-form .wsf-field-wrapper[data-id="123"]
data-type
The field type of a field is stored in an attribute called
data-type
An example of this attribute for a checkbox field is:
data-type="checkbox"
You could reference all checkbox fields in CSS and JavaScript by using a selector such as:
[data-type="checkbox"]
… or a more specific example:
.wsf-form .wsf-field-wrapper[data-type="checkbox"]
Field Attributes
A simplified example of a field element generated by WS Form is as follows (we’ve removed some attributes for clarity):
<input type="text" id="wsf-1-field-123" class="wsf-field" name="field_123">
Lets run through each of these attributes in turn. Choose a tab to learn more.
id
The DOM element ID of a field is stored in an attribute called:
id
And example of this attribute is:
id="wsf-1-wrapper-123"
The format of a field wrapper ID is as follows:
wsf-<instance_id>-field-<field_id>
So, the first form rendered on a page (first instance), for field ID 5 would have an ID of:
wsf-1-field-5
You could be reference this in CSS and JavaScript by using a selector such as:
#wsf-1-field-5
class
The field class is stored in an attribute called:
class
An example of this attribute is:
class="wsf-field"
All fields have a class of:
wsf-field
You could be reference this in CSS and JavaScript by using a selector such as:
.wsf-field
… or a more specific example:
.wsf-form .wsf-field-wrapper .wsf-field
Adding Custom Classes to All Fields
You can add custom classes to all fields in the Form Settings > Styling (Tab) > Classes > Field setting.
name
The name attribute is used to reference the value of a field after submitting the form. The field name is stored in a data attribute called:
name
An example of this attribute for field ID 123 is:
name="field_123"
You could reference this in CSS and JavaScript by using a selector such as:
[name="field_123"]
… or a more specific example:
.wsf-form .wsf-field-wrapper .wsf-field[name="field_123"]