How can I add a colour picker to my form?

Written Dec 14, 2012 08:28

If you need your users to be able to select colours then adding a colour picker which shows them a range of coloured swatches to choose from can be helpful. This FAQ uses one particular MooTools based picker but could be adapted to other similar pickers.

You can see a demonstration form using CFv4 by clicking {rokbox text=|here|}http://greyhead.org/index.php?option=com_chronoforms&tmpl=component&chronoform=demo_color_picker{/rokbox}.

This picker I used for this FAQ is the MooTools ColorPicker from this page. You will need to download the package, un-zip it and find the file color-picker.js from the Source folder. Copy this file to your site. I placed it in a new folder: /components/com_chronoforms//extras/color_picker

In your form drag a Text box element into the Preview box. Open it and set the name and id to color_picker. You can use another name and id but then will need to make sure that the JavaScript below uses the same id.

In the Actions box drag a Load JS action from the Utilities group into the On Load event. Open it and add this code:

<?php
// make sure that MooTools is loaded first
JHTML::_('behavior.mootools');
// Load the colour picker file
$doc =& JFactory::getDocument();
$doc->addScript(JURI::root().'components/com_chronoforms/extras/color_picker/color-picker.js');
?>
window.addEvent('domready', function(){
  var cpicker, cp_width, cp_height;
  // set the swatch width and height
  cp_width = 12;
  cp_height = 12;
  // load the color picker
  cpicker = new ColorPicker($('color_picker'),{
    cellWidth: cp_width, 
    cellHeight: cp_height
  });
});

Check that the path of the file you uploaded and the id of the text input are correct for your form.

You can also edit the cp_width and cp_height variables to change the size of the swatches.

Save your form and check that the picker is working correctly.

FAQs