Title: Color Picker for Contact Form 7 Author: howdytheme Published: 20 Luglio 2022 Last modified: 29 Giugno 2026 --- Ricerca i plugin ![](https://ps.w.org/color-picker-for-contact-form-7/assets/banner-772x250.png?rev =3475250) ![](https://ps.w.org/color-picker-for-contact-form-7/assets/icon-256x256.png?rev =3475250) # Color Picker for Contact Form 7 Di [howdytheme](https://profiles.wordpress.org/howdytheme/) [Scarica](https://downloads.wordpress.org/plugin/color-picker-for-contact-form-7.zip) * [Dettagli](https://it.wordpress.org/plugins/color-picker-for-contact-form-7/#description) * [Recensioni](https://it.wordpress.org/plugins/color-picker-for-contact-form-7/#reviews) * [Installazione](https://it.wordpress.org/plugins/color-picker-for-contact-form-7/#installation) * [Sviluppo](https://it.wordpress.org/plugins/color-picker-for-contact-form-7/#developers) [Supporto](https://wordpress.org/support/plugin/color-picker-for-contact-form-7/) ## Descrizione **Color Picker for Contact Form 7** 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. Using the built-in CF7 tag generator, you can insert a color picker field into any Contact Form 7 form in seconds — 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. Powered by the popular **JSColor** 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 — all from within the Contact Form 7 form editor. **Useful Links:** – [Documentation](https://topsmodule.com/how-to-create-color-picker-for-contact-form-7/)– [Live Demo](https://topsmodule.com/task/color-picker-for-contact-form-7/) – [Get Pro Version](https://topsmodule.com/product/color-picker-for-contact-form-7/) #### 🎨 Why Use Color Picker for Contact Form 7? 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. Common use cases include: * Design and branding request forms * Product customization and printing order forms * Interior design or decoration inquiry forms * T-shirt, merchandise, or print-on-demand order forms * Website or logo design request forms * Event planning and decoration forms #### ✅ Free Version Features **Color Picker Field Tag Generator** Adds 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. **Required Field Support** Mark 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. **Default Color Value** Set a pre-selected default color that is shown in the field when the form first loads. Accepts any valid hex color value (e.g. `#b5428d`). This gives users a starting point and ensures the field is never empty. **Color Format Selection — Hex or RGBA** Choose how the selected color value is captured and submitted. Two formats are supported: – **Hex** — standard 6-digit hexadecimal color code (e.g. `#ff6600`) – **RGBA** — red, green, blue, and alpha( opacity) value (e.g. `rgba(255, 102, 0, 1)`) **Color Picker Popup Background Color** Customize 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: `#333`). **Color Picker Popup Width** Set the width of the color picker popup in pixels. Default value is 180px. **Color Picker Popup Height** Set the height of the color picker popup in pixels. Default value is 180px. **Color Picker Popup Padding** Control the internal padding of the color picker popup. Default value is 18px. **Color Preview Size** Set the size of the color preview swatch displayed inside the input field, in pixels. Default value is 80px. **Color Picker Popup Position** Choose where the color picker popup appears relative to the input field. Four positions are available: – Left – Right – Top – Bottom ( default) **Custom ID and Class** Optionally assign a custom HTML `id` and/or CSS `class` to the color picker field for styling or JavaScript targeting purposes. **Mail Tag Support** The 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. #### 🔒 Pro Version Features The Pro version of Color Picker for Contact Form 7 unlocks powerful additional functionality for advanced forms. **Multiple Color Picker Fields Per Form** In 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 **Pro version**, you can add **unlimited color picker fields** to a single form — ideal for forms where users need to specify multiple colors (e.g. primary and secondary brand colors, background and text colors, etc.). 👉 [Upgrade to Pro](https://topsmodule.com/product/color-picker-for-contact-form-7/) ## Screenshot [⌊Contact Form 7 form editor with the color_picker button highlighted in the toolbar.⌉⌊ Contact Form 7 form editor with the color_picker button highlighted in the toolbar .⌉[ Contact Form 7 form editor with the color_picker button highlighted in the toolbar. [⌊CF7 form editor showing the fully generated color picker tag inserted into the form template.⌉⌊CF7 form editor showing the fully generated color picker tag inserted into the form template.⌉[ CF7 form editor showing the fully generated color picker tag inserted into the form template. [⌊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.⌉⌊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.⌉[ 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. [⌊Color picker field on the live front-end form showing a color swatch, RGBA value in the input, and the color selection popup open.⌉⌊Color picker field on the live front-end form showing a color swatch, RGBA value in the input, and the color selection popup open.⌉[ Color picker field on the live front-end form showing a color swatch, RGBA value in the input, and the color selection popup open. ## Installazione 1. Make sure **Contact Form 7** is installed and activated on your WordPress site. 2. Upload the `color-picker-for-contact-form-7` folder to the `/wp-content/plugins/` directory, or install directly via the WordPress Plugin screen by searching for“ Color Picker for Contact Form 7”. 3. Activate the plugin through the **Plugins** screen in WordPress. 4. Open any existing Contact Form 7 form (or create a new one). 5. In the form editor, click the new **color_picker** button in the tag generator toolbar. 6. Configure your color picker field options in the panel that appears. 7. Click **Insert Tag** to add the shortcode to your form. 8. Save the form. Done! The color picker field will now appear on your form on the front end. ## FAQ ### Does this plugin require Contact Form 7? 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. ### What color formats are supported? The plugin supports two formats: **Hex** (e.g. `#ff6600`) and **RGBA** (e.g. `rgba( 255, 102, 0, 1)`). You can choose the format when configuring the field in the tag generator. ### Can I set a default color? 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. ### Can I use more than one color picker on the same form? 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. ### Will the selected color value be included in the email notification? Yes. After inserting the color picker tag, go to the **Mail** 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. ### Can I customize the appearance of the color picker popup? Yes. You can control the background color, width, height, padding, preview size, and popup opening position directly from the tag generator — no custom code required. ## Recensioni Non ci sono recensioni per questo plugin. ## Contributi e sviluppo “Color Picker for Contact Form 7” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito. Collaboratori * [ howdytheme ](https://profiles.wordpress.org/howdytheme/) [Traduci “Color Picker for Contact Form 7” nella tua lingua.](https://translate.wordpress.org/projects/wp-plugins/color-picker-for-contact-form-7) ### Ti interessa lo sviluppo? [Esplora il codice](https://plugins.trac.wordpress.org/browser/color-picker-for-contact-form-7/) segui il [repository SVN](https://plugins.svn.wordpress.org/color-picker-for-contact-form-7/), segui il [log delle modifiche](https://plugins.trac.wordpress.org/log/color-picker-for-contact-form-7/) tramite [RSS](https://plugins.trac.wordpress.org/log/color-picker-for-contact-form-7/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0 * Initial release. * Added color_picker form tag with full tag generator support. * Supports hex and RGBA color formats. * Configurable popup background color, width, height, padding, preview size, and position. * Default color value support. * Required field validation support. * Custom ID and class attribute support. * Mail-tag support for CF7 email notifications. ## Meta * Versione **1.0** * Ultimo aggiornamento **3 mesi fa** * Installazioni attive **30+** * Versione WordPress ** 5.5 o superiore ** * Testato fino alla versione **7.0.6** * Versione PHP ** 7.2 o superiore ** * Lingua * [English (US)](https://wordpress.org/plugins/color-picker-for-contact-form-7/) * Tag * [color field](https://it.wordpress.org/plugins/tags/color-field/)[color picker](https://it.wordpress.org/plugins/tags/color-picker/) [contact form 7](https://it.wordpress.org/plugins/tags/contact-form-7/) * [Visualizzazione avanzata](https://it.wordpress.org/plugins/color-picker-for-contact-form-7/advanced/) ## Valutazioni Non sono state ancora inviate recensioni. [La tua recensione](https://wordpress.org/support/plugin/color-picker-for-contact-form-7/reviews/#new-post) [Vedi tutte le recensioni](https://wordpress.org/support/plugin/color-picker-for-contact-form-7/reviews/) ## Collaboratori * [ howdytheme ](https://profiles.wordpress.org/howdytheme/) ## Supporto Hai qualcosa da dire? Ti serve aiuto? [Chiedi nel forum di supporto](https://wordpress.org/support/plugin/color-picker-for-contact-form-7/)