外掛標籤
開發者團隊
② 後台搜尋「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/;
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.
