### [How to Add a Color Picker to Your Form](https://wpforms.com/developers/how-to-add-a-color-picker-to-your-form/)

**Published:** June 16, 2022
**Author:** Editorial Team

**Excerpt:** This tutorial will walk you through how to add a color picker field to your form using jQuery and a standard text field. 

**Content:**

## Introduction

Would you like to add a color picker field to your form? Using a snippet and custom CSS and CSS class names, you can achieve this and we’ll walk you through every step of the way!

## Creating the form

First, you’ll need to create your form and add the fields that you’ll be needing. For each field you want to be a color picker, add a **Single Line Text** field. In our example, we’ve added two of these fields.

![create your form and add your fields including the single line text field you will use to add a color picker](https://wpforms.com/wp-content/uploads/2022/06/wpforms-add-color-picker-create-form.jpg)

For any help in creating your form, please [review this documentation](https://wpforms.com/docs/creating-first-form/ "How to Create Your First Form").

## Creating a color picker field

Once the **Single Line Text** fields are added to your form, we need to tell these fields that they will be color picker fields.

To achieve this, click on one of the **Single Line Text** you’ve added and on the **Advanced** tab, add `wpforms-color-picker` to the **CSS Classes** field.

![on the advanced tab inside the CSS classes field, add the text wpforms-color-picker](https://wpforms.com/wp-content/uploads/2022/06/wpforms-color-picker-field-add-css-classname.jpg)

You’ll repeat this step for each field you want to display as a color picker.

## Adding the snippet

Now it’s time to add the snippet to your site. If you need help in how and where to add snippets to your site, [please check out this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
 * Adding a color picker to your form
 *
 * @link https://wpforms.com/developers/how-to-add-a-color-picker-to-your-form/
 */
 
function wpf_dev_color_picker_field() {
    ?>

**Categories:** Tutorials

**Tags:** CSS, Javascript, jQuery, JS, PHP

---