Color Picker for Elementor Forms adds a visual color selector field to your Elementor Pro forms.
Users can choose from preset colors or pick a custom color via a color picker input (HEX, RGBA, or HSL), and the selected color can instantly change any element on the page using a CSS selector.
This is perfect for:
- Live product previews
- Custom color choices
- Dynamic button styling
- Theme customization forms
- Any interactive color-based UI
Table of contents:
Installation
- Upload the plugin folder to /wp-content/plugins/.
- Activate Color Picker for Elementor Forms in Plugins → Installed Plugins.
- Open a page with Elementor Pro Form
Adding and Configure 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.
