Introduction
Overview
This article will show you how to add a color picker to a web form created with Gravity Forms.
There are many add-ons for Gravity Forms, but I couldn’t find one which would give me the possibility to add a color picker to an input text field.
So I have started to find a solution for this and integrate it with Gravity Forms.
So, on your WordPress website you will need to install:
- Gravity Forms – you will build the quiz with this
Important disclaimer: for all of the changes we describe in this tutorial we highly recommend that you use a Child Theme or My Custom Functions WordPress plugin to implement them. Otherwise, you risk accidentally breaking your site and/or losing the changes you made when you make updates to your plugins and themes in the future.
jQuery MiniColors plugin integration
To achieve the desired result we will use a good jQuery plugin called “jQuery MiniColors”. You just need to download the plugin files.
Unpack the jquery-minicolors-master.zip file and from all the files we will only use jquery.minicolors.min.js and jquery.minicolors.css.
Adding the jQuery plugin files to theme header.php
You need to login to your SFTP or FTP and add the two files I have mentioned above to your theme folder (/wp-content/themes/your-theme).
So the paths to these two files would be /wp-content/themes/your-theme/jquery.minicolors.min.js and /wp-content/themes/your-theme/jquery.minicolors.css.
Or, to keep things in good order, you can add these files to separate folders like /js or /css (/wp-content/themes/your-theme/js/jquery.minicolors.min.js and /wp-content/themes/your-theme/css/jquery.minicolors.css).
After these files are uploaded to your theme folder, you will need to add the references to your header.php theme file. Just open the header.php file and add these two lines before the closing </head> tag:
<link rel=’stylesheet’ id=’minicolors-css’ href='<?php bloginfo(‘stylesheet_directory’); ?>/css/jquery.minicolors.css’ type=’text/css’ media=’all’ />
After we add these, we need to add the code which will actually make the color picker available on some input text fields which we will select based on a simple method which I will show a little later.
This is the code:
<script>
jQuery(document).ready( function() {jQuery(‘.colorpick‘).minicolors({
animationSpeed: 50,
animationEasing: ‘swing‘,
change: null,
changeDelay: 0,
control: ‘saturation‘,
defaultValue: ‘‘,
format: ‘hex‘,
hide: null,
hideSpeed: 100,
inline: false,
keywords: ‘transparent‘,
letterCase: ‘lowercase‘,
opacity: false,
position: ‘bottom left‘,
show: null,
showSpeed: 100,
theme: ‘default‘,
swatches: []
});
});
</script>
The above code adds some features to the color pickup like the hexadecimal model for the colors (format: ‘hex’), the option to add a certain keyword like for example for a transparent color (keywords: ‘transparent’) or the position where the color picker will appear (position: ‘bottom left’).
For even more options just check the index.html file found in the downloaded .zip.
One important thing to notice in the last piece of code is that all these options are applied to elements having .colorpick class.
So this code added to your header.php will look something like this:
Add the color picker to a Gravity Forms input field
In Gravity Forms we cannot add a class directly to an input field so first we need to add a class to the input field wrapper (<li>).
Based on that, we will use a .php function to add the desired class “.colorpick” to the input field.
Add a custom class to the input field wrapper
We have everything ready now.
The only remaining thing is to “connect” Gravity Forms with the jQuery MiniColors plugin.
Let’s say the for example we have a bigger form and we want to add the color picker to one input field or even to more input fields.
We will achieve this really easy.
Just go to your WordPress Dashboard > Forms and click to edit the form where you want to add the color picker.
Just click on the first field and go to Appearance tab and add “addcolor” in Custom CSS Class input field.
Add .colorpick to input text field
As I said above, we will use a .php custom class for this. You will need to open your theme functions.php file and add the following code:
<?php
add_filter( ‘gform_field_content’, function( $field_content, $field ) {
if ( $field->cssClass == ‘addcolor’ ) {
return str_replace( ‘medium’, “medium colorpick”, $field_content );
}
return $field_content;
}, 10, 2 );
?>
The Result: Color Picker on your Gravity Forms
At this point we have successfully added the color picker to an input field, or to multiple input fields, if we add the “.addcolor” class to other fields.
Hm, it’s not’s working for me – turn off all my optimization plugins.
Using Divi, with a child theme.
https://heroically.co/form-testing/ – the very bottom field should be the color picker
What do you think is wrong?
Hi Ana,
Thanks for your comment.
It’s hard to say what the issue might be without checking your code, how you set up the form on the backend, etc.
Usually it’s caused by missing some small step.
If you don’t feel like messing with it anymore we can also help you. Shoot me a message at vic(at)memberfix.rocks
If you want to go the DIY route I would start by going through all of the steps in this tutorial again and making sure that you did everything *exactly* as described. 🙂
Best,
Vic
So grateful to find this option! Can you tell me if I’m able to do dual colors? Actually I need 4 colors side by side, but will be okay with just 2 if that’s all that’s possible. Thank you!
Hi Stephanie.
Thank you for your comment.
You can add as many colors you need, if you add the class as described above. Can you give me an example of what you actually need?
SC
I’ve posted questions on numerous sites and you’re the only one that responded! I wish I had seen it sooner. Thank you!!! I’ll try to explain it, although a picture would be better. I have one, but not sure if I can attach it here. I have up to 25 color options for LEDs I’m selling. On a few of the LEDs there are up to 4 colors that come on one bar. On the ‘color’ dropdown I would like my customers to have a visual of the colors that they will then select and put into cart. I have… Read more »
Hello Stephanie,
You are welcome!
Do you use gravity forms in this process? If you have a-commerce website do you use Woo or something else? I’m asking because, from what I understand from your request, a solution for this could be done maybe with no plugins. I would like to see a real page, if possible. Thank you. SC
Is it possible to tweak this to work with elementor forms?
Hi Seb,
Yes that should be possible. Feel free to reach out at sales(at)memberfix.rocks if you’d like some help doing that. 🙂
Thanks!
Vic
Hey, Thanks for the tutorial.
I have some problem, if you can look at it.
I attached an image.
The color picker is without the colors… I can move the cursor and see the color change, but the square is empty.
Thanks.
Hello Keren,
Can you also share the console log to check the script errors?