# How to add Color Field in Elementor Form

You can easily add a Color field inside your Elementor Pro form. Please just follow these steps:

* Firstly, make sure you have "**Turned on**" the Color Field in the **WordPress Admin Panel > Elementor > Advanced Fields > Form Elements Tab.**

<figure><img src="https://657136784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbprsJ9yqkDnblQKMr24T%2Fuploads%2FV1J8XTq9VxetXiRUkv8q%2Fimage.png?alt=media&#x26;token=cacbd43b-8215-4d6c-9e55-2f152bdc5125" alt="" width="406"><figcaption></figcaption></figure>

* Search "**Form"** inside the Elementor widgets section.
* It will create a form with the default three fields.
* Select "**Color**" field type.

<figure><img src="https://657136784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbprsJ9yqkDnblQKMr24T%2Fuploads%2F7EHMB5oD5QiTEPQQlWBF%2Fimage.png?alt=media&#x26;token=c1a2000a-857f-4de0-9c1e-214b71e13ce5" alt="" width="301"><figcaption></figcaption></figure>

* Now click on the "**Advanced**" tab.

<figure><img src="https://657136784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbprsJ9yqkDnblQKMr24T%2Fuploads%2FsehnrzLW4TibyS5DW1Hg%2Fimage.png?alt=media&#x26;token=515485b3-9fe5-4e37-920c-78d9a0992128" alt="" width="282"><figcaption></figcaption></figure>

* **Default Value -** It lets you choose the default value of the color field.

***

* The style settings are inside the style tab of the form widget, where you can customize the visual aspects of the field such as color, typography, and spacing settings.

<figure><img src="https://657136784-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbprsJ9yqkDnblQKMr24T%2Fuploads%2Fr2QKvmo8JriyXV7Bsffk%2Fimage.png?alt=media&#x26;token=c73df9f8-43e2-4dee-a956-8c840e6a0644" alt="" width="305"><figcaption></figcaption></figure>

## Video Overview

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbprsJ9yqkDnblQKMr24T%2Fuploads%2FrkbhUV9DRMNXUK3lL0p8%2Fcolor-field-demo.mp4?alt=media&token=f305c672-2e4b-43b5-8ccf-f4dd7ba2760a" %}
