---
title: "CustomFormField"
slug: "customformfield"
updated: 2024-03-18T14:14:29Z
published: 2024-03-18T14:14:29Z
canonical: "docs.mapp.com/customformfield"
---

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

# CustomFormField

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

## Class

### constructor

Create an instance of the class "CustomFormField" and pass name and value which should be tracked. Pass the custom form field to a CustomForm to track it.

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

### setAttribute

Set an attribute.

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

### getAttribute

Get an attribute value.

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

### focus

Change the internal form field status to "focused".

```plaintext
customFormFieldInstance.focus();
```

### blur

Change the internal form field status to "blurred".

```plaintext
customFormFieldInstance.blur();
```

### addEventListener

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

### removeEventListener

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

### Example

```javascript
// create a custom form field
var customFormFieldInstance = new wtSmart.extension.form.CustomFormField(
    'custom form field name'
);

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

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

// change the internal form field status to 'focused'
customFormFieldInstance.focus();

// change the internal form field status to 'blurred'
customFormFieldInstance.blur();

// add event listener
customFormFieldInstance.addEventListener('focus', function() {
    console.log('custom form field was focused');
});

// remove all event listener
customFormFieldInstance.removeEventListener('focus');
```