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.

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.

org/demo-color-picker-field/

org/document-color-picker-for-elementor-forms/;

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

• Edit a form with Elementor Pro.

• Add a Text or Select field.

• In field settings, toggle Enable Color Picker.

• (Optional) In Target Element Selector, enter a CSS selector to auto-apply the chosen color (e.g.,.elementor-button ).

• Add predefined colors or allow users to choose their own.

• Customize layout, border, and color preview styles with CSS.