內容簡介
Color Picker for Elementor Forms 讓您可以在任何 Elementor Pro 表單欄位中添加專業且可自訂的顏色選擇器。用戶可以輕鬆地視覺選擇顏色、手動輸入顏色代碼或從預定義的顏色選項中選擇，適合產品自訂、設計請求或調查選擇。
【主要功能】
• 支援文字或選擇欄位類型
• 內建的視覺顏色選擇器
• 支援顏色格式：HEX、RGB(A)、HSL
• 可選的自訂顏色輸入
• 預定義調色板選項
• 動態顏色綁定功能
外掛標籤
開發者團隊
② 後台搜尋「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
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.
