Form Tagging

Form tagging allows you to manually configure forms and form fields to retrieve meaningful data analytics, such as the number of completed and abandoned sessions where the form was used.

For nonstandard forms not requiring tagging, you must add a "DXA ID" to each form and form field you want to track. For example:

<form action="submit.php" method="POST" data-di-form-track data-di-form-id="contact">
    First name: <input type="text" name="field156" data-di-field-id="firstname"><br />
    Last name: <input type="text" name="field135" data-di-field-id="lastname"><br />
    <input type="submit" value="Submit">
</form>

If data-di-form-track is present, the form will be tracked. If data-di-form-id is present, this is what the form ID will be. If it is not present, but data-di-form-track is, DXA uses the existing mechanism to determine the form ID as configured in Form Settings. data-di-field-id should be added to each field. If this isn't present, DXA uses the input's name or id attribute.

You can also add data-di-form-track and data-di-form-id to any selector that constitutes a form (such as a div, fieldset, section). However, for nonstandard forms that do not use <form> tags, you will need to trigger the formSubmitted JavaScript call listed in the Form Submission Tagging article in order to notify DXA of a form submission.

An example of form tagging at a div level is displayed below:

<div id="registerFormContainer" class="website-register" style="display: block;" data-di-form-track data-di-form-id="register-now">
First name: <input type="text" name="field156" data-di-field-id="firstname"><br />
    Last name: <input type="text" name="field135" data-di-field-id="lastname"><br />
    <input type="submit" value="Submit">

Tagging forms using a tag manager

The attributes mentioned above can be hard-coded into a form on a website, or alternatively can be added to forms through a tag management solution.

The below code is an example of how this can be achieved. You will need to replace [REQUIRED FORMS] with the relevant selector to identify the form in question that you wish to tag, while [FORM NAME] will need to be replaced with the name that you want to give to the form.

Please be aware that this is merely an example and may require amending to work with the forms on your website.

var formTracking = document.querySelectorAll('[REQUIRED FORMS]');
        for (var i = 0; i < formTracking.length; i++) {
            formTracking[i].setAttribute("data-di-form-track", "");
            formTracking[i].setAttribute("data-di-form-id", '[FORM NAME]');
        }

Submission tagging

If a form on your website uses a non-standard form submission, such as via AJAX, you will need to add a call on the submission of this form to inform DXA that this has been submitted.