Color Picker for Elementor Forms

Description

Color Picker for Elementor Forms lets you add a professional and customizable color selector to any Elementor Pro Form field.
Users can easily pick a color visually, type a color code manually, or select from predefined color options — perfect for product customization, design requests, or survey choices.

Now it also supports dynamic color binding — when a user selects a color, you can automatically apply it to any element in your form or theme using a custom CSS selector (e.g. .elementor-button or #heading).
Let users select from a pre-defined set of swatches you make available or even let them choose a custom hex value from the color picker.

Demo: https://demo.add-ons.org/demo-color-picker-field/
Documentation: https://add-ons.org/document-color-picker-for-elementor-forms/;

Perfect for

• Product customization (choose a color, theme, or paint)
• Design requests or branding forms
• Surveys or polls involving color preference
• Any form where users need to choose a color

Features

• Works with Text or Select field types (no new field type needed).
• Built-in visual color picker powered by jscolor.
• Support for color formats: HEX, RGB(A), HSL.
• Optional Custom Color input for users to choose their own color.
• Predefined palette options.
• Dynamic color binding: apply the selected color to any element via a custom CSS selector (e.g., .elementor-button, #title).
• Live sync: input and color picker stay in sync dynamically.
• Fully responsive and customizable with CSS variables.
• Compatible with Elementor Pro Forms and frontend submissions.

Usage

1. Edit a form with Elementor Pro.
2. Add a Text or Select field.
3. In field settings, toggle Enable Color Picker.
4. (Optional) In Target Element Selector, enter a CSS selector to auto-apply the chosen color (e.g., .elementor-button).
5. Add predefined colors or allow users to choose their own.
6. Customize layout, border, and color preview styles with CSS.