Add a Color Picker Form Field

Several Formidable Pro users have requested the ability to add a color picker field into a form. This post explains exactly how to do that.

This tutorial and the screenshots displayed are taken from the default 2011 theme.

Step 1: Get the files

The color picker javascript (jscolor) used in this tutorial can be downloaded directly by clicking here. Or if you would like to read more about jscolor.js, Click here to go to the developer’s website.
Once downloaded, unzip/extract the file and upload the entire folder (js file and all the images) in your theme’s javascript or js folder if there is one. If there is no folder containing javascripts, you may want to create one.

Step 2: Load the Javascript

If you are familiar with developing themes, you likely know how to load a javascript into a wordpress site. For those of you who don’t know or just forgot, read on.
With the jscolor folder uploaded to your site, you can add the following script to load it onto all your wordpress pages. There are much fancier ways of doing this, but for now we will go for the easiest/quickest method.

1. open your header.php file
2. load the jscolor javascript by adding the following line of code somewhere just above the wp_head(); hook

   <script src="<?php echo get_template_directory_uri(); ?>/js/jscolor/jscolor.js" type="text/javascript"></script>

   Be sure to change the path to reflect where you put your file.

3. check the page source of your site to make sure the file is there in your head

Step 3: Create your form and insert it on a page

In my example, I created a simple 1-field form with a single line text field.

At this point, you should have a form with your single text field displaying on the front end. If you click on the field, it behaves as any normal text field would. Here’s what my form looks like after following steps 1-3:

Step 4: Add some Class to the Drab Text Field

Update: As of version 1.6.3, this class can be added by going to the form settings page, clicking the “Customize HTML” tab, and changing [input] in the box for this field to [input class="color"]

And when I say “some class”, I really mean “a class”. More specifically, class=”color”. To add a class to an input we need to make use of one of formidable’s many hooks. The following code should be added to your theme’s function.php file:
add_filter('frm_field_classes', 'add_input_class', 10, 2);
function add_input_class($classes, $field){
if($field['id'] == 80){ //change 80 to the ID of your field
$classes .= ' color';
}
return $classes;
}
There are two keys to making sure the code above works for you:

• Change the “80″ to the ID specific to your field
• Don’t change anything else in the code above unless you know what you are doing

After copying and pasting this into your functions.php file, make sure to change the field ID from 80(my field ID) to whatever your field ID is. You can find the field ID by clicking on the field in the form builder page. The ID is in blue bar that expands the field options. This is the magic code that activates the color picker javascript, and if you have done everything correctly, you should have something like this: