Buy Now
Sign in

FAQ search

How can I add an external Color picker to my form?

Published: Saturday, 31 January 2015 16:12

Here is a very simple method to add a color picker to a text input in ChronoForms v5. This was contributed by user Surgit.

Using the JSColor color picker

JSColor is a lightweight picker that does not require jQuery (or MooTools) and is very simple to use.

Download the latest release of JSColor here where you can also see a demo and documents.

Unzip the file and copy the jscolor folder to the components/com_chronoforms5/extras/ folder on your site. If this doesn't exist you may need to create it.

In your form Designer tab add a Text Box element and, in the settings, add jscolor to the Class box. (Note: some earlier versions used color as the class.) 

In the Setup tab drag a Load JavaScript action into the On load event (or the event that loads the page including the color picker if this is a multi-page form). In the JS Files box of the Load JavaScript action add this code to load the library:

echo JUri::root().'components/com_chronoforms5/extras/jscolor/jscolor.js';

Save your form and test and voila ! it should be working.