Color Picker for Elementor Forms

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/ ; Pro Version: https://add-ons.org/plugin/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. 01Edit a form with Elementor Pro.
2. 02Add a Text or Select field.
3. 03In field settings, toggle Enable Color Picker .