Form Settings

To access the form settings, click the settings icon in the top toolbar when editing a form. The form settings sidebar will then appear on the right-hand side of the page. This contains the following tabs:

You can edit any of the settings in each of these tabs and then click the ‘Save’ button to save your changes. If you do not want to save your changes, you can click the ‘Cancel’ button or click any other form element to close the field settings sidebar.

Basic

The basic tab contains settings such as the form label, spam protection, and tracking settings.

Label

This is the label (title) of your form. As well as entering a label into this field, you can also edit the label at the top of the page. You should enter an easy-to-understand label for your form, for example, ‘Contact Us’ or ‘Appointment Request’. This label is used to identify your form in WordPress and can also be added to the top of your form for website visitors to see using the ‘Render Label’ setting.

Render Label

If enabled the label will be shown at the top of your form for website visitors to see. If you do not want the label to appear, uncheck this box.

Spam Protection

Forms created by WS Form are inherently less likely to be prone to spam. This is because they are generated on the fly in a website visitor’s browser when a page loads and are often not even seen by ‘spam bots’. In addition to this, we offer a variety of additional spam protection measures.

To read more about preventing spam, click here.

HoneyPot

HoneyPot spam protection works by adding a hidden field on your form that is intended to fool ‘spam bots’ into thinking they need to complete that field. If completed the email is rejected.

If you enable this setting, WS Form will automatically add HoneyPot protection to your form. There is nothing else you need to do!

Duplicate Protection

Another common issue with forms is that sometimes website visitors will double click a submit button. On a conventional form, this can often cause duplicate submissions to be processed.

WS Form comes with built-in duplicate protection. When this setting is enabled, it will disable the submit button once it has been clicked to prevent duplication from happening. We recommend leaving this setting enabled.

Google Analytics

This features is only available in WS Form PRO.

The WS Form PRO Google Analytics settings let you fire events when a tab or field is interacted with.

WS Form PRO automatically detects if you have Google Analytics installed. The following versions of Google Analytics are supported:

  • gtag.js
  • analytics.js
  • ga.js (Deprecated)

Google recommends updating to their gtag.js code if you are using ga.js.

Note that WS Form PRO does not install the Google Analytics tag for you. You should do that with an additional plugin or embed it in your theme code.

Fire Tab Events

When this is enabled and a website visitor clicks on a tab, an event will be logged in Google Analytics. One event is fired per tab per form session.

Fire Field Events

When this is enabled and a website visitor interacts with a field on your form, an event will be logged in Google Analytics. One event is fired per field per form session.

Tracking

When a form is saved or submitted, WS Form can store a wealth of tracking information along with that form to help you gain a better understanding of your audience.

The available tracking settings can be found here.

Advanced

Form

Reset Form On Submit

When enabled WS Form will reset the form when it is successfully submitted, so that any data in the fields is removed. We recommend keeping this setting enabled.

An example of when you would want to disable this setting might be if someone is doing repeated data entry into a form and only changing part of the submission each time.

Custom Form Heading HTML

If you have enabled label rendering (see above), then the label will be shown at the top of the form. For developers this will be rendered in an h2 wrapper. You can override this by entering a different mask into this field. Use #label where you want the label to be added.

For example you could change this to: <h3>#label</h3>

Wrapper CSS Classes

To add a class to the actual form element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Tabs

Remember Last Tab Clicked

If enabled WS Form will store the last tab a website visitor has clicked in a cookie on their browser. This makes navigating a complex form easier if they return to the form at a later date to complete it. This is particularly helpful if you have added a ‘Save‘ button to a form, which will save the current form so that it can be retrieved later.

Custom Tab Heading HTML

If you have enabled label rendering of a tab, then the label will be shown at the top of each tab. For developers this will be rendered in an h3 wrapper. You can override this by entering a different mask into this field. Use #label where you want the label to be added.

For example you could change this to: <h4>#label</h4>

Wrapper CSS Classes

To add a class to all tabs, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Sections

Custom Section Legend HTML

If you have enabled label rendering of a section, then the label will be shown at the top of each section. For developers this will be rendered in a legend wrapper. A legend is used because this label is added within a fieldset. You can override this by entering a different mask into this field. Use #label where you want the label to be added.

For example you could change this to: <legend><em>#label</em></legend>

Wrapper CSS Classes

To add a class to all sections, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Fields

Focus Invalid Fields

If this setting is enabled, WS Form will focus on the first invalid field it finds when a form is submitted. This is a convenience feature that makes it easier for a website visitor to locate issues within their data entry.

Scroll To Invalid Fields

If this setting is enabled, WS Form will scroll to the first invalid field it finds when a form is submitted. This is a convenience feature that makes it easier for a website visitor to locate issues within their data entry.

Note that we do not recommend using this setting in all cases. Some WordPress themes will make scrolling ineffective due to their design.

Wrapper CSS Classes

To add a class to all field wrappers, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Field CSS Classes

To add a class to all fields, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.

Default Label Position

When WS Form is installed, labels are positioned at the top of a field. You can change this setting to set label positioning to be one of the following options:

  • Top
  • Left
  • Right
  • Bottom

Note that some frameworks do not support all of these label positions.

Changing this setting will affect all fields that have their label position set to ‘Default’.

Default Label Width

If the label position of a field is set to left or right, you can specify how wide the label will be. You can consider the overall width of the label and the field to be 12 columns. By default labels are rendered at 3 columns wide (1/4 width), which means the field itself is 9 columns wide (3/4 width). You can change the width of the label using this setting.

Render ‘Required’ HTML

When this is enabled, WS Form will output a small ‘Required’ caption next to the label of any fields that are set as ‘Required’. If this is disabled, the captions will not be rendered.

Custom ‘Required’ HTML

You can change the ‘Required’ caption to anything you wish using this setting.

For example you could change it to: <span class="danger">*</span>

Auto Populate

The auto populate tab will appear if you have any actions that provide support for this feature. Auto populate pulls data from an external source and makes that data available for setting the default value of fields.

To use this feature, check the ‘Populate Using Action’ box, and then select the action you want to pull data from. Follow the on-screen prompts for setting up auto complete and then click the ‘Save’ button at the bottom.