WS Form - Smart, fast, forms for WordPress
My Account
Demo
Get WS Form

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 with custom CSS? 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="wsft-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

Changing Form IDs

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. The WordPress block can also be configured to use a different element ID. 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.

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="wsft-1-field-wrapper-123" class="wsft-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="wsft-1-field-wrapper-123"

The format of a field wrapper ID is as follows:

wsft-<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:

wsft-1-field-wrapper-5

You could be reference this in CSS and JavaScript by using a selector such as:

#wsft-1-field-wrapper-5

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="wsft-1-field-123" class="wsft-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="wsft-1-wrapper-123"

The format of a field wrapper ID is as follows:

wsft-<instance_id>-field-<field_id>

So, the first form rendered on a page (first instance), for field ID 5 would have an ID of:

wsft-1-field-5

You could be reference this in CSS and JavaScript by using a selector such as:

#wsft-1-field-5