---
title: "Advanced Form Tracking"
slug: "advanced-form-tracking"
updated: 2024-03-16T06:02:34Z
published: 2024-03-16T06:02:34Z
canonical: "docs.mapp.com/advanced-form-tracking"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced Form Tracking

## Multiple Forms on a single Page

Since only one form can be measured per page and pixel instance, you need to initialize an own pixel instance to measure the second form if you want to track two forms on the same page.

This second instance serves exclusively to capture this second form and will not collect any further data, as they are already measured by the first instance and would count twice in Intelligence.

If you want to measure two or more forms on a single page, proceed as follows:

1. In Tag Integration, navigate to *Parameters* and click **New parameter.** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/b5c098e5-850b-430a-af7d-c8c10905f7e7.png)
2. Now configure the parameter as follows: ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/9d57dceb-4cf0-498d-bb62-18f6e35e8c9d.png)

| Parameter | Description | Example |
| --- | --- | --- |
| Name | Enter a name for the parameter | Form 2 |
| Description | Optionally, add a description to the field provided. |  |
| Type | Select from the dropdown list the required type, from which the value should be read out: - JavaScript variable | JavaScript variable |
| Definition | Add the required variable. | document.forms[0] |
3. Click **Create**.
4. Now, open the Mapp Intelligence plugin of the container you want to configure and open the tab **Form**. **![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/c3037140-4d67-4b39-84a3-b3d6cebaa28b.png)**
5. Click **+ Add form tracking**.
6. Select from the dropdown list the parameter that you have created in step 3 (for example, "Form 2") and select the page area where the form is included.

## Manual Update of Form Fields

If you modify the content of form fields by means of JavaScript or simulate a form focus, then call the following method and submit the changed form field:

**Example**

```plaintext
wts.push(['updateFormFieldStatus', document.getElementById('firstname')]);
```

If you measure multiple forms on your page use the following call instead:

**Example**

```plaintext
wts.push(['multipleUpdateFormFieldStatus', document.forms[0], document.getElementById('firstname')]);
```

## Tracking Forms without the <form> Tag

Using forms on your web page that do not have the <form>-tag requires that you create a custom form for tracking.

1. First, create an instance of the class "CustomForm".
2. Submit the form name and the corresponding form fields, which you want to measure to this instance.
3. Then pass the custom form to the tracking pixel to measure this form.

**Example**

```plaintext
<div id="formular-name">
     <input id="textfield" name="textfield" type="text" size="30"></br>
     <input id="password" name="password" type="password" size="30"></br>
     <textarea id="textarea" name="textarea" cols="50" rows="10"></textarea></br>
     <select id="select" name="select" size="5" multiple>
         <option rel="select1" value="1">Select 1</option>
         <option rel="select2" value="2">Select 2</option>
     </select></br>
     <input id="submit" type="submit" value="submit">
</div>
```

```plaintext
wts.push(['customForm', function(CustomForm) {
     var customForm = new CustomForm('form name' , [
         document.getElementById('textfield'),
         document.getElementById('password'),
         document.getElementById('textarea'),
         document.getElementById('select'),
         document.getElementById('submit' )
     ]);
     wts.push(['formTrackInstall', customForm]);
}]);
```

If you send your form via AJAX and therefore no page exit takes place, then send the form request manually with the following function:

**Example AJAX**

```plaintext
function myCustomFormSubmit(formObject) {
     /* Your code */
     wts.push(['formTrackSubmit']);
     wts.push(['send', 'form']);
     /* Your code */
}
```