Formidable Forms users have been requesting the ability to add a color picker in WordPress forms. This tutorial explains exactly how to do that.
Step 1: Get the files
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.
- open your header.php file
Be sure to change the path to reflect where you put your file.
- 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
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 the customizable form HTML. Find the HTML box for your field, and replace [input] with [input class="color"].
Try out your Color Picker in WordPress Forms
Not using Formidable Forms yet? Get started with the most flexible WordPress Form Builder around.