{"id":342324,"date":"2026-07-19T07:57:18","date_gmt":"2026-07-19T07:57:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/color-picker-for-elementor-forms\/"},"modified":"2026-07-19T07:56:49","modified_gmt":"2026-07-19T07:56:49","slug":"color-picker-for-elementor-forms","status":"publish","type":"plugin","link":"https:\/\/tg.wordpress.org\/plugins\/color-picker-for-elementor-forms\/","author":22038057,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0.2","requires":"5.0","requires_php":"","requires_plugins":null,"header_name":"Color Picker for Elementor Forms","header_author":"addonsorg","header_description":"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.","assets_banners_color":"7e92c6","last_updated":"2026-07-19 07:56:49","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/add-ons.org\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":50,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"addonsorg","date":"2026-07-19 07:56:49"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3613328,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3613328,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3613328,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3613328,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3613328,"resolution":"1","location":"assets","locale":"","width":2102,"height":1446}},"screenshots":{"1":"Enable Color Picker<\/strong> 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)."}},"plugin_section":[],"plugin_tags":[269393,18838,272289,76538,19620],"plugin_category":[],"plugin_contributors":[234546],"plugin_business_model":[],"class_list":["post-342324","plugin","type-plugin","status-publish","hentry","plugin_tags-color-field","plugin_tags-color-picker","plugin_tags-color-selector","plugin_tags-elementor","plugin_tags-form-field","plugin_contributors-addonsorg","plugin_committers-addonsorg"],"banners":{"banner":"https:\/\/ps.w.org\/color-picker-for-elementor-forms\/assets\/banner-772x250.png?rev=3613328","banner_2x":"https:\/\/ps.w.org\/color-picker-for-elementor-forms\/assets\/banner-1544x500.png?rev=3613328","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/color-picker-for-elementor-forms\/assets\/icon-128x128.png?rev=3613328","icon_2x":"https:\/\/ps.w.org\/color-picker-for-elementor-forms\/assets\/icon-256x256.png?rev=3613328","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/color-picker-for-elementor-forms\/assets\/screenshot-1.png?rev=3613328","caption":"Enable Color Picker<\/strong> in field settings."}],"raw_content":"\n

Color Picker for Elementor Forms<\/strong> lets you add a professional and customizable color selector to any Elementor Pro Form field.
\nUsers can easily pick a color visually, type a color code manually, or select from predefined color options \u2014 perfect for product customization, design requests, or survey choices.<\/p>\n\n

Now it also supports dynamic color binding<\/strong> \u2014 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<\/code> or #heading<\/code>).
\nLet 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.<\/p>\n\n

Demo:<\/strong> https:\/\/demo.add-ons.org\/demo-color-picker-field\/<\/a>
\nDocumentation:<\/strong> https:\/\/add-ons.org\/document-color-picker-for-elementor-forms\/<\/a>;<\/p>\n\n

Perfect for<\/h3>\n\n
    \n
  • Product customization (choose a color, theme, or paint)<\/li>\n
  • Design requests or branding forms<\/li>\n
  • Surveys or polls involving color preference<\/li>\n
  • Any form where users need to choose a color<\/li>\n<\/ul>\n\n

    Features<\/h3>\n\n
      \n
    • Works with Text<\/strong> or Select<\/strong> field types (no new field type needed). <\/li>\n
    • Built-in visual color picker<\/strong> powered by jscolor<\/code>. <\/li>\n
    • Support for color formats: HEX, RGB(A), HSL<\/strong>. <\/li>\n
    • Optional Custom Color<\/strong> input for users to choose their own color. <\/li>\n
    • Predefined palette options. <\/li>\n
    • Dynamic color binding<\/strong>: apply the selected color to any element via a custom CSS selector (e.g., .elementor-button<\/code>, #title<\/code>). <\/li>\n
    • Live sync: input and color picker stay in sync dynamically. <\/li>\n
    • Fully responsive and customizable with CSS variables. <\/li>\n
    • Compatible with Elementor Pro Forms and frontend submissions.<\/li>\n<\/ul>\n\n

      Usage<\/h3>\n\n
        \n
      1. Edit a form with Elementor Pro. <\/li>\n
      2. Add a Text<\/strong> or Select<\/strong> field. <\/li>\n
      3. In field settings, toggle Enable Color Picker<\/strong>. <\/li>\n
      4. (Optional) In Target Element Selector<\/strong>, enter a CSS selector to auto-apply the chosen color (e.g., .elementor-button<\/code>). <\/li>\n
      5. Add predefined colors or allow users to choose their own. <\/li>\n
      6. Customize layout, border, and color preview styles with CSS.<\/li>\n<\/ol>\n\n\n
          \n
        1. Upload the plugin files to the \/wp-content\/plugins\/color-picker-for-elementor-forms<\/code> directory, or install the plugin through the WordPress Plugins screen. <\/li>\n
        2. Activate the plugin through the \"Plugins\" screen in WordPress. <\/li>\n
        3. Create or edit a form using Elementor Pro. <\/li>\n
        4. Enable Color Picker<\/strong> in field settings. <\/li>\n
        5. (Optional) Configure Target Element Selector<\/strong> to bind color dynamically. <\/li>\n
        6. Save and preview the form \u2014 users can now visually select colors.<\/li>\n<\/ol>\n\n\n

          1.0.0<\/h4>\n\n
            \n
          • Initial release with full color picker support for Elementor Forms (HEX, RGBA, custom palette, jscolor integration, dynamic color binding).<\/li>\n<\/ul>","raw_excerpt":"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.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/342324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=342324"}],"author":[{"embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/addonsorg"}],"wp:attachment":[{"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=342324"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=342324"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=342324"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=342324"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=342324"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/tg.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=342324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}