mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

How to add a color picker to GravityForms

color picker

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:

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:

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.minicolors.min.js”></script>
<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:

jquery code - How to add a color picker to GravityForms

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.

add color picker to gravity forms input - How to add a color picker to GravityForms

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.

GRAVITY FORMS COLOR PICKER FIELD - How to add a color picker to GravityForms

Just click on the first field and go to Appearance tab and add “addcolor” in Custom CSS Class input field.

gravity forms add class - How to add a color picker to GravityForms

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.

colorpicker3 - How to add a color picker to GravityForms

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Learn how to add a mandatory multi-step Terms of Service to the Memberpress checkout form using the Contact Form 7 plugin…
Learn how to properly export your wishlist members and thrivecart subscriptions and import them seamlessly into MemberPress!
Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ana
Ana
December 22, 2019 3:12 am

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?

Vic Dorfman
Admin
Reply to  Ana
December 22, 2019 4:49 pm

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

Stephanie
Stephanie
January 31, 2020 3:55 am

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!

Stephanie
Stephanie
Reply to  SC
February 22, 2020 2:37 pm

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 »

Seb
Seb
September 3, 2020 12:21 am

Is it possible to tweak this to work with elementor forms?

Vic Dorfman
Admin
Reply to  Seb
September 8, 2020 5:04 pm

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

Keren Danino
September 23, 2020 10:35 pm

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.

colors.jpg
Victor Barannik
Reply to  Keren Danino
December 27, 2020 12:48 pm

Hello Keren,

Can you also share the console log to check the script errors?