Form settings

The following settings are available:

Setting	Description
Form Collection Mode	Select whether you want to use Dynamic or Tagged collection. If you select Dynamic, you will be shown a Delete all existing form data. checkbox allowing you to delete all previously collected form data.
Field selector preferred attribute	Configure the preferred attribute DXA uses to collect the form. For example, if the forms on your property have session-based or changing IDs with consistent names, you would select Name from instead of Id.
Ignored Field Selector	Add a CSS selector to apply to all tracked forms. This will cause any matching form fields to be ignored from analytics.
Form Dictionary	If you selected Tagged form collection, enter a selector for each form to tag with the DXA data-di-form-track attribute. To enter a selector to tag, manually enter the selector in the Selector box or use search to point to the form element directly on the page. Note: To point to the UI element using search, the page with the form element must be available as a tab on the same browser you're using DXA.
Callbacks	Configure the Form Title Callback, Form Error Callback, Field Title Callback, and Field Error Callback to help DXA determine how titles and errors are defined on the forms on your website.

Field Error Callback

To ensure form error reporting displays validation errors, you must configure Field Error Callback.

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

The example below contains a validation error message:

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

The example below is a function that can be used to configure the tracking of these error messages:

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;
}