Decibel Insight
Knowledgebase

Form Settings

Form Settings can be configured in Property Settings. This can be found by going to Settings > Properties and clicking the Edit icon next to the relevant property and then clicking the Form tab. From here, you can configure a number of settings.

The Form Settings can be configured here to select whether you want to use Dynamic or Tagged collection. This can be selected from the Form Collection drop-down. If you change the Form Collection from Dynamic to Tagged, you will also be shown a Clear Existing Form Data button which allows you to clear all of the previous form data that has been collected.

Field selector preferred attribute allows you to configure the preferred attribute that we use to collect the form. For example, if the forms on your property have session-based or changing IDs, but consistent names, you would select name from the drop-down as opposed to ID.

You can also configure the Ignored Field Selector to add a CSS Selector that will be applied to all tracked forms, and will cause any matching form fields to be ignored from Form Analytics.

Meanwhile, you can also configure the Form Title Callback, Form Error Callback, Field Title Callback and Field Error Callback to help Decibel Insight determine how titles and errors are defined on the forms on your website.

For our Form Validation Error Reporting to display validation errors, you will need to configure the Field Error Callback text box.

As there is no native way to mark-up validation errors in HTML, this requires some custom configuration, in the form of a JavaScript function.

Below is an example form containing a validation error message, and subsequently an example function that can be used to configure the tracking of these error messages:

<form action="submit.php" method="POST" id="contact">
    <label>
        First name: <input type="text" name="first_name">
        <span class="error">First name must be provided</span>
    </label>
    <label>
        Last name: <input type="text" name="last_name" />
    </label>
    <input type="submit" value="Submit" />
</form>
function (field) {
    // Locate the error element by finding the first sibling with a "error" class
    var error = field.parentNode ? field.parentNode.querySelector('.error') : false;

    // If no error element exists, end the function by returning false
    if(!error) return false;

    // If an error exists and has text, trim the text and return the message
    return error.innerText ? error.innerText.trim() : false;
}