---
title: "CustomForm"
slug: "customform"
updated: 2024-03-18T14:13:35Z
published: 2024-03-18T14:13:35Z
canonical: "docs.mapp.com/customform"
---

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

# CustomForm

You can create a custom form and use it for tracking if you are using forms on your page that are not created by using the html tag "<form>".

## Class

### constructor

Create an instance of the class "CustomForm" and pass form name and all belonging form fields which should be tracked. Pass the custom form to the Smart Pixel to track it.

```javascript
/**
 * @param {string} name
 * @param {HTMLElement[]|CustomFormField[]} [elements]
 *
 * @constructor
 */
wtSmart.extension.form.CustomForm(name, elements);
```

### add

You can add all form fields you want to track.

```javascript
/**
 * @param {HTMLElement|CustomFormField} element
 *
 * @returns {wtSmart.extension.form.CustomForm}
 */
customFormInstance.add(element)
```

### setAttribute

Set an attribute.

```javascript
/**
 * @param {string} key
 * @param {string} value
 */
customFormInstance.setAttribute(key, value)
```

### getAttribute

Get an attribute value.

```javascript
/**
 * @param {string} key
 *
 * @returns {string}
 */
customFormInstance.getAttribute(key);
```

### submit

Change the internal form status to "submitted".

```plaintext
customFormInstance.submit();
```

### addEventListener

```javascript
/**
 * @param {string} evt
 * @param {function} func
 */
customFormInstance.addEventListener(evt, func);
```

### removeEventListener

```javascript
/**
 * @param {string} evt
 */
customFormInstance.removeEventListener(evt);
```

### Example

```xml
<div id="form03">
    <input id="001" type="hidden" name="hidden1" value="1" />
    <input id="002" type="hidden" name="hidden2" value="2" />
    <input id="003" type="text" name="text1" value="" size="15" maxlength="15" />
    <input id="004" type="text" name="text2" value="" size="20" maxlength="20" />
    <textarea id="005" cols="40" name="textarea1" rows="6"></textarea>
    <input id="006" type="password" value="" name="password1" maxlength="10" size="10" />
    <input id="007" type="radio" name="radio1" value="1" />Mr.<br />
    <input id="008" type="radio" name="radio2" value="2" />Ms.<br />
    <input id="009" type="checkbox" name="checkbox1" />Mail me more info<br />
    <input id="10" type="checkbox" name="checkbox2" />E-Mail me more info<br />
    <select id="011" name="select1">
        <option value="a1">a1</option>
        <option value="a2">a3</option>
        <option value="a3">a3</option>
        <option value="a4">a4</option>
    </select>
    <select id="012" name="multiple1" multiple="multiple">
        <option value="abc">abc</option>
        <option value="def">def</option>
        <option value="ghi">ghi</option>
        <option value="jkl">jkl</option>
        <option value="mno">mno</option>
    </select>
    <input id="013" type="submit" name="submit1" value="submit" />
</div>
```

```javascript
// create a custom form
var customFormInstance = new wtSmart.extension.form.CustomForm(
    'custom form name',
    [
        document.getElementById('001'),
        document.getElementById('002'),
        document.getElementById('003'),
        document.getElementById('004'),
        document.getElementById('005'),
        document.getElementById('006')
    ]
);

// add new form fields
customFormInstance
    .add(document.getElementById('007'))
    .add(document.getElementById('008'))
    .add(document.getElementById('009'))
    .add(document.getElementById('010'))
    .add(document.getElementById('011'))
    .add(document.getElementById('012'))
    .add(document.getElementById('013'));

// set an attribute
customFormInstance.setAttribute('foo', 'bar');

// get an attribute
var attribute = customFormInstance.getAttribute('foo');

// change the internal form status to 'submitted'
customFormInstance.submit();

// add event listener
customFormInstance.addEventListener('submit', function() {
    console.log('custom form was submitted');
});

// remove all event listener
customFormInstance.removeEventListener('submit');
```