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.