HTML Form Attributes

WS Form is a WordPress form plugin that supports features such as:

…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.

WS Form - Form Settings - Styling - Classes - Form Wrapper

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.

WS Form - Form Settings - Styling - Classes - Field Wrapper

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.

WS Form - Form Settings - Styling - Classes - Field

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"]