How to add a color picker to GravityForms

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:

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:

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:

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.