Decibel Insight
Knowledgebase

Form Tagging

In order to retrieve form analytics for some forms, including the number of sessions that have either abandoned the form or completed it, there is the potential for additional configuration to be required. Decibel are able to track most web forms out-of-box, and form tracking can be configured within Form Settings.

Form non-standard forms that do require tagging, form tagging simply requires a "Decibel ID" to be added to each form, and field within that form, that you wish to track. An example of this can be seen below.

<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, then the form will be tracked. If data-di-form-id is present, then this is what the form ID will be, while if it is not present, but data-di-form-track is, we will use the existing mechanism of determining the form ID. Again, this is configured within Form Settings. data-di-field-id is required to be added to each field, however if this isn’t present, we will use 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, form non-standard forms that do not use <form> tags, you will need to trigger the formSubmitted JavaScript call listed in the Form Submission Tagging article which can be found here in order to notify Decibel of a form submission.

An example of form tagging at a div level can be seen 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 Decibel that this has been submitted. You can find out more about Form Submission Tagging here.