Document – Color Picker for Elementor Forms

November 8, 2025
| No Comments

Overview

Color Picker for Elementor Forms adds a visual color selector field to your Elementor Pro forms.

You can let users pick from predefined swatches or allow them to choose any custom color via a color picker input (HEX, RGBA, or HSL).

Getting Started

 Installation

  1. Upload the plugin folder to /wp-content/plugins/.
  2. Activate Color Picker for Elementor Forms in Plugins → Installed Plugins.
  3. Open a page with Elementor Pro Form

Adding a Color Picker Field

  1. Add a new Color Picker field to your Elementor form.
  2. In the Field Options set:
    • Label: The Label name (for example, “Red”).
    • Color: Choose the color value for each item (HEX, RGB, or HSL).
    • Value: The value that will be saved when that color is selected.
  3. Type: Select the input type you prefer: Select, Radio, or Checkbox.
  4. Allow Custom Color: Enable this option to display a color picker input that lets users choose any color freely outside your predefined palette.
  5. Change Target Element: Enter a CSS selector (e.g: .elementor-button, #title, .product-box) to automatically apply the selected color to that element when the user picks a color.
  6. Theme: We’ve prepared 8 ready-made color themes for you to explore and use as inspiration for your design. https://demo.add-ons.org/demo-color-picker-field/
  7. Width & Height: Adjust the size of each color box in pixels, em, or rem (e.g. 30px, 2em). This helps you control how large or small each swatch appears in your layout.

Demo