Interactions with Forms

Form Field “Change” Events

UseItBetter tracking code automatically captures the JavaScript “change” events which are dispatched when a user selects a value (radio, select, checkbox) or when they fill in a value for a field (input, textarea) and leave that field.

The terms “changed”, “entered” and “filled in”, all mean the same: an initial value in a form field has been changed (i.e. from blank to “something”) by a user or programatically – either by a website itself or by a browser (for example by Chrome Autofill feature).

wiki-form-field-events-flow

In the example pictured above:

  1. the “email” field is empty by default, but it contains the “your email” placeholder text (which isn’t treated as the field value)
  2. when a user clicks the field, the focus event is dispatched.
  3. while a user is typing in a field no events are dispatched.
  4. when a user switches from the “email” field to the “phone” field,  JavaScript fires a “change” event followed by a “blur” event (which means that a field lost its focus) – this is when UseItBetter tracking code captures the change event:
    input[1]#emailField.active.change{val:"xxxx@xxxx.xxx", type:"text", name:"email"}

Masking of Change Event Value

By default, as you may have noticed in the example above, all users’ input to the text fields is masked by a JavaScript code responsible for the data collection before sending the data to UseItBetter servers in order to protect users’ privacy.

Input fields

In the example above, a user entered an email address into an input form field:

test@gmail.com

the JavaScript responsible for data collection changes the value to

xxxx@xxxx.xxx

by replacing all letters with the letter ‘x’ and preserving special characters.

A phone number entered into an input field:

+44 72134741

would be collected as +99 99999999 with all digits replaced with 9. Such an event would look like this:

input[1]#phone.change({val:"+99 99999999"})

You can read below how to disable masking of specific form fields (i.e. search input) or set custom masking (e.g. to preserve a country code in a phone number: +44 123 456 789 as +44 999 999 99)

Select, radio and fields with predefined responses

Values of form fields with predefined values, i.e. select (dropdown) or radio fields are tracked by default, without masking:

input[1]#yearOfBirth.change({val:"1979", label:"1979", name:"yearOfBirth"})

Note that it is common for select fields to have different value and label, for example

input[1]#brand.change({val:"0", label:"Aston Martin", name:"brand"})

Customize Tracking and Masking of Form Fields

You can modify the default masking of form field values by adding a custom attribute to your form fields, for example:

<input type="text" name="phone" udash-mask-offset="3" value="">

Available masking options:

Force masking:

udash-mask-value = "true"

Force unmasking:

udash-mask-value = "false"

Force unmasking of the first characters:

udash-mask-offset = "3"

Force masking of option (dropdown) labels:

udash-mask-label = "true"

Ignore the change event:

udash-ignore="true"

Working Example

Open the link below to see a sample form. It will show you how various form fields are being tracked depending on their type and masking options.

https://www.useitbetter.com/wiki/examples/form-tracking/example.html?uParams=preview@@on

By adding

?uParams=preview@@on

to a URL of a page with UseItBetter tracking code, you can preview all captured event in the in-page console.

Troubleshooting

Changes to some form fields are not being tracked. Why?

There are two common reasons why editing a form field doesn’t produce a change event:

1. Your form field is not a standard HTML form element (input, select). This can be a common case if your form is using custom fields or JavaScript libraries that provide additional functionality to the standard form elements.

2. Your form field is a standard HTML form element, but some JavaScript code, typically responsible for validation of those fields, is preventing propagation of “change” events.

In many cases, it is sufficient to add the following snippet to your existing code, within a field’s change listener:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    field.dispatchEvent(evt);
}
else
    field.fireEvent("onchange");

where field is the original HTML form field element (i.e. an input or select).

Please contact our support to discuss other solutions.