{"id":160106,"date":"2022-07-20T05:21:06","date_gmt":"2022-07-20T05:21:06","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/color-picker-for-contact-form-7\/"},"modified":"2026-06-29T09:37:02","modified_gmt":"2026-06-29T09:37:02","slug":"color-picker-for-contact-form-7","status":"publish","type":"plugin","link":"https:\/\/da.wordpress.org\/plugins\/color-picker-for-contact-form-7\/","author":20419894,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0","stable_tag":"trunk","tested":"7.0.2","requires":"5.5","requires_php":"7.2","requires_plugins":null,"header_name":"Color Picker for Contact Form 7","header_author":"","header_description":"This plugin allows Enables adding a color field.","assets_banners_color":"d5b9b2","last_updated":"2026-06-29 09:37:02","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":30,"downloads":1458,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.0":"<p>Initial release of Color Picker for Contact Form 7. Install now to add color picker fields to your Contact Form 7 forms.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3475250,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3475250,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3475250,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3475250,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"Screenshot-1.png":{"filename":"Screenshot-1.png","revision":2758950,"resolution":"1","location":"assets","locale":"","width":1899,"height":879},"Screenshot-2.png":{"filename":"Screenshot-2.png","revision":3475250,"resolution":"2","location":"assets","locale":"","width":1888,"height":837},"Screenshot-3.png":{"filename":"Screenshot-3.png","revision":3475250,"resolution":"3","location":"assets","locale":"","width":1150,"height":825},"Screenshot-4.png":{"filename":"Screenshot-4.png","revision":2758950,"resolution":"4","location":"assets","locale":"","width":1171,"height":866}},"screenshots":{"1":"Contact Form 7 form editor with the color_picker button highlighted in the toolbar.","2":"CF7 form editor showing the fully generated color picker tag inserted into the form template.","3":"Form-tag Generator popup displaying all configurable options: default color, name, ID, class, color format, popup background color, width, height, padding, preview size, and position.","4":"Color picker field on the live front-end form showing a color swatch, RGBA value in the input, and the color selection popup open."}},"plugin_section":[],"plugin_tags":[269394,269393,18838,269395,1152],"plugin_category":[],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-160106","plugin","type-plugin","status-publish","hentry","plugin_tags-cf7-color-input","plugin_tags-color-field","plugin_tags-color-picker","plugin_tags-color-picker-addon","plugin_tags-contact-form-7","plugin_committers-howdytheme"],"banners":{"banner":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/banner-772x250.png?rev=3475250","banner_2x":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/banner-1544x500.png?rev=3475250","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/icon-128x128.png?rev=3475250","icon_2x":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/icon-256x256.png?rev=3475250","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/Screenshot-1.png?rev=2758950","caption":"Contact Form 7 form editor with the color_picker button highlighted in the toolbar."},{"src":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/Screenshot-2.png?rev=3475250","caption":"CF7 form editor showing the fully generated color picker tag inserted into the form template."},{"src":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/Screenshot-3.png?rev=3475250","caption":"Form-tag Generator popup displaying all configurable options: default color, name, ID, class, color format, popup background color, width, height, padding, preview size, and position."},{"src":"https:\/\/ps.w.org\/color-picker-for-contact-form-7\/assets\/Screenshot-4.png?rev=2758950","caption":"Color picker field on the live front-end form showing a color swatch, RGBA value in the input, and the color selection popup open."}],"raw_content":"<!--section=description-->\n<p><strong>Color Picker for Contact Form 7<\/strong> is a lightweight and easy-to-use WordPress plugin that extends Contact Form 7 with a dedicated color picker field. Whether you are building a design request form, a product customization form, or any form where users need to select a color, this plugin gives you a seamless, visually rich color input.<\/p>\n\n<p>Using the built-in CF7 tag generator, you can insert a color picker field into any Contact Form 7 form in seconds \u2014 no coding required. The color value selected by the user is automatically included in the form submission and can be included in notification emails using the standard CF7 mail-tag system.<\/p>\n\n<p>Powered by the popular <strong>JSColor<\/strong> library, the color picker popup is fully configurable: choose between hex and RGBA color formats, set the popup background color, control its dimensions, position, and preview size \u2014 all from within the Contact Form 7 form editor.<\/p>\n\n<p><strong>Useful Links:<\/strong>\n- <a href=\"https:\/\/topsmodule.com\/how-to-create-color-picker-for-contact-form-7\/\">Documentation<\/a>\n- <a href=\"https:\/\/topsmodule.com\/task\/color-picker-for-contact-form-7\/\">Live Demo<\/a>\n- <a href=\"https:\/\/topsmodule.com\/product\/color-picker-for-contact-form-7\/\">Get Pro Version<\/a><\/p>\n\n\n\n<h4>\ud83c\udfa8 Why Use Color Picker for Contact Form 7?<\/h4>\n\n<p>Contact Form 7 is the most popular WordPress form plugin, but it does not natively support color input fields. This plugin fills that gap perfectly. Instead of asking users to type a color code manually (and risk errors), you can provide a professional, interactive color picker that makes the experience intuitive and accurate.<\/p>\n\n<p>Common use cases include:<\/p>\n\n<ul>\n<li>Design and branding request forms<\/li>\n<li>Product customization and printing order forms<\/li>\n<li>Interior design or decoration inquiry forms<\/li>\n<li>T-shirt, merchandise, or print-on-demand order forms<\/li>\n<li>Website or logo design request forms<\/li>\n<li>Event planning and decoration forms<\/li>\n<\/ul>\n\n\n\n<h4>\u2705 Free Version Features<\/h4>\n\n<p><strong>Color Picker Field Tag Generator<\/strong>\nAdds a new \"color_picker\" tag type inside the Contact Form 7 form editor. Use the visual tag generator panel to configure the field without writing any code.<\/p>\n\n<p><strong>Required Field Support<\/strong>\nMark the color picker field as required. If the user tries to submit the form without selecting a color, CF7's standard validation will trigger and prevent submission.<\/p>\n\n<p><strong>Default Color Value<\/strong>\nSet a pre-selected default color that is shown in the field when the form first loads. Accepts any valid hex color value (e.g. <code>#b5428d<\/code>). This gives users a starting point and ensures the field is never empty.<\/p>\n\n<p><strong>Color Format Selection \u2014 Hex or RGBA<\/strong>\nChoose how the selected color value is captured and submitted. Two formats are supported:\n- <strong>Hex<\/strong> \u2014 standard 6-digit hexadecimal color code (e.g. <code>#ff6600<\/code>)\n- <strong>RGBA<\/strong> \u2014 red, green, blue, and alpha (opacity) value (e.g. <code>rgba(255, 102, 0, 1)<\/code>)<\/p>\n\n<p><strong>Color Picker Popup Background Color<\/strong>\nCustomize the background color of the color picker popup panel. This is useful for matching the color picker's appearance to your site's design. Accepts any hex value (default: <code>#333<\/code>).<\/p>\n\n<p><strong>Color Picker Popup Width<\/strong>\nSet the width of the color picker popup in pixels. Default value is 180px.<\/p>\n\n<p><strong>Color Picker Popup Height<\/strong>\nSet the height of the color picker popup in pixels. Default value is 180px.<\/p>\n\n<p><strong>Color Picker Popup Padding<\/strong>\nControl the internal padding of the color picker popup. Default value is 18px.<\/p>\n\n<p><strong>Color Preview Size<\/strong>\nSet the size of the color preview swatch displayed inside the input field, in pixels. Default value is 80px.<\/p>\n\n<p><strong>Color Picker Popup Position<\/strong>\nChoose where the color picker popup appears relative to the input field. Four positions are available:\n- Left\n- Right\n- Top\n- Bottom (default)<\/p>\n\n<p><strong>Custom ID and Class<\/strong>\nOptionally assign a custom HTML <code>id<\/code> and\/or CSS <code>class<\/code> to the color picker field for styling or JavaScript targeting purposes.<\/p>\n\n<p><strong>Mail Tag Support<\/strong>\nThe selected color value is fully compatible with the Contact Form 7 mail system. Insert the generated mail-tag into the Mail tab to include the chosen color in submission notification emails.<\/p>\n\n\n\n<h4>\ud83d\udd12 Pro Version Features<\/h4>\n\n<p>The Pro version of Color Picker for Contact Form 7 unlocks powerful additional functionality for advanced forms.<\/p>\n\n<p><strong>Multiple Color Picker Fields Per Form<\/strong>\nIn the free version, only one color picker field is active per form page. If more than one color picker field is added, additional fields display a message prompting the user to upgrade. With the <strong>Pro version<\/strong>, you can add <strong>unlimited color picker fields<\/strong> to a single form \u2014 ideal for forms where users need to specify multiple colors (e.g. primary and secondary brand colors, background and text colors, etc.).<\/p>\n\n<p>\ud83d\udc49 <a href=\"https:\/\/topsmodule.com\/product\/color-picker-for-contact-form-7\/\">Upgrade to Pro<\/a><\/p>\n\n<!--section=installation-->\n<ol>\n<li>Make sure <strong>Contact Form 7<\/strong> is installed and activated on your WordPress site.<\/li>\n<li>Upload the <code>color-picker-for-contact-form-7<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory, or install directly via the WordPress Plugin screen by searching for \"Color Picker for Contact Form 7\".<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> screen in WordPress.<\/li>\n<li>Open any existing Contact Form 7 form (or create a new one).<\/li>\n<li>In the form editor, click the new <strong>color_picker<\/strong> button in the tag generator toolbar.<\/li>\n<li>Configure your color picker field options in the panel that appears.<\/li>\n<li>Click <strong>Insert Tag<\/strong> to add the shortcode to your form.<\/li>\n<li>Save the form.<\/li>\n<\/ol>\n\n<p>Done! The color picker field will now appear on your form on the front end.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20contact%20form%207%3F\"><h3>Does this plugin require Contact Form 7?<\/h3><\/dt>\n<dd><p>Yes. This plugin is an add-on for Contact Form 7 and requires it to be installed and activated. It will not function without it.<\/p><\/dd>\n<dt id=\"what%20color%20formats%20are%20supported%3F\"><h3>What color formats are supported?<\/h3><\/dt>\n<dd><p>The plugin supports two formats: <strong>Hex<\/strong> (e.g. <code>#ff6600<\/code>) and <strong>RGBA<\/strong> (e.g. <code>rgba(255, 102, 0, 1)<\/code>). You can choose the format when configuring the field in the tag generator.<\/p><\/dd>\n<dt id=\"can%20i%20set%20a%20default%20color%3F\"><h3>Can I set a default color?<\/h3><\/dt>\n<dd><p>Yes. In the tag generator, you can specify a default color value using any valid hex code. This color will be pre-selected when the form loads.<\/p><\/dd>\n<dt id=\"can%20i%20use%20more%20than%20one%20color%20picker%20on%20the%20same%20form%3F\"><h3>Can I use more than one color picker on the same form?<\/h3><\/dt>\n<dd><p>In the free version, only the first color picker field on a form will be functional. Additional fields will show a note directing users to the Pro version. Upgrade to Pro for unlimited color picker fields per form.<\/p><\/dd>\n<dt id=\"will%20the%20selected%20color%20value%20be%20included%20in%20the%20email%20notification%3F\"><h3>Will the selected color value be included in the email notification?<\/h3><\/dt>\n<dd><p>Yes. After inserting the color picker tag, go to the <strong>Mail<\/strong> tab in Contact Form 7 and insert the corresponding mail-tag (shown in the tag generator after inserting the tag). The submitted color value will appear in notification emails.<\/p><\/dd>\n<dt id=\"can%20i%20customize%20the%20appearance%20of%20the%20color%20picker%20popup%3F\"><h3>Can I customize the appearance of the color picker popup?<\/h3><\/dt>\n<dd><p>Yes. You can control the background color, width, height, padding, preview size, and popup opening position directly from the tag generator \u2014 no custom code required.<\/p>\n\n<\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Added color_picker form tag with full tag generator support.<\/li>\n<li>Supports hex and RGBA color formats.<\/li>\n<li>Configurable popup background color, width, height, padding, preview size, and position.<\/li>\n<li>Default color value support.<\/li>\n<li>Required field validation support.<\/li>\n<li>Custom ID and class attribute support.<\/li>\n<li>Mail-tag support for CF7 email notifications.<\/li>\n<\/ul>","raw_excerpt":"Add a fully customizable color picker field to your Contact Form 7 forms \u2014 let users select and submit any color in hex or RGBA format.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/160106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=160106"}],"author":[{"embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/howdytheme"}],"wp:attachment":[{"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=160106"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=160106"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=160106"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=160106"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=160106"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/da.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=160106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}