=== Color Picker for Elementor Forms ===
Contributors: addonsorg  
Tags: elementor, color picker, color field, form field, color selector  
Requires at least: 5.0  
Tested up to: 7.0  
Stable tag: 1.0.0  
License: GPLv2 or later  
License URI: https://www.gnu.org/licenses/gpl-2.0.html  

Let users select from a pre-defined set of swatches you make available or even let your users select a custom hex value from the color picker.

== 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.

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/color-picker-for-elementor-forms` directory, or install the plugin through the WordPress Plugins screen.  
2. Activate the plugin through the "Plugins" screen in WordPress.  
3. Create or edit a form using Elementor Pro.  
4. Enable **Color Picker** in field settings.  
5. (Optional) Configure **Target Element Selector** to bind color dynamically.  
6. Save and preview the form — users can now visually select colors.

== Screenshots ==

1. Enable **Color Picker** in field settings.  
2. Choose between predefined colors or custom input.  
3. Live color preview when user selects a color.  
4. Example form with color options for products.
5. Dynamic color binding example (button/background changes on select).

== Changelog ==

= 1.0.0 =  
* Initial release with full color picker support for Elementor Forms (HEX, RGBA, custom palette, jscolor integration, dynamic color binding).