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

# Setting Up Custom Fields

In addition to the basic credit card fields, you can have Vindicia host some custom fields. To do that, put a `div` tag in your form as a place holder for the iframe, which is created automatically later.

```

<div id="vin_shoesize"></div>
```

Then, in `vindicia.setup()` options, add lines as shown in this example:

```

  shoesize: { 
  selector: "#vin_shoesize",
  placeholder: "Enter Shoe Size"
  },
```

When the page loads and the `setup()` method is called, it creates an iframe. Notice the key `shoesize`. You can use this later if you want to validate this field.

When the fills out the form (enters a shoe size) and submits it, the shoe size is transmitted from the browser directly to Vindicia, and stored in your web session. It does not pass through your Web server.

Custom fields cannot contain credit card numbers at submit time. This is part of the automatic validation check. Also, a valid custom field is just a field that is not blank.

## Custom Validation

You can also respond to validation onblur events with this custom field.

```

 onVindiciaFieldEvent: function(event) {
 if (event.detail.fieldType == 'shoesize') {
 if (!event.detail.isValid)
 alert('Shoe size cannot be blank');
 }
 }
},
```

**Parent topic:**[Implementing HOA with Hosted Fields](../topics/Implementing_HOA_with_Ho)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.