Adding a 'Color Picker'

I have been incorporating simple Gravity Forms into my websites for a few months now and am constantly amazed by the possibilities.

I am currently building my most ambitious form yet for my own web design business and wish to include a color picker like iColorPicker or other similar tool. I have found other similar forum questions and tried to apply the techniques demonstrated by Kevin for incorporating CK Editor into forms, but cannot put it all together.

I have downloaded the js for iColorPicker , uploaded it to my site and am calling it in the page header. I am also calling the jquery script from Google code.

I understand that I need to replace the relevant input, but am not quite sure where it this needs to be place:

<script type="text/javascript">
    iColorPicker.replace( 'input_4_11' );
</script>

Any tips to put me in the right direction would be greatly appreciated.

Cheers,

Keiran

Hi Alex. Thanks for getting back to me so quickly. I do appreciate it.

I have tried the suggested solution but when I add the iColorPicker replace script, the form disappears altogether.

This is my test page of the form so far.

I am probably missing something really obvious like a jquery conflict with my current theme (the Genesis framework).

Did you insert the iColorPicker.js in the header or footer under Genesis Theme options? It isn't showing in your header or footer, but rather in your content. Alternatively, you can do it in functions.php using http://codex.wordpress.org/Function_Reference/wp_enqueue_script. Also, it didn't appear to me that you added the class to your field.

Their example uses a class of iColorPicker for the input, though I didn't really delve into the instructions.
<input id="mycolor" name="mycolor" type="text" value="#ffcc00" class="iColorPicker" />

This color picker was rather easy to implement: http://gusc.lv/jquery/gccolor.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../jquery.gccolor.1.0.3/css/gccolor.css" />
	<script type="text/javascript" src="../jquery.gccolor.1.0.3/jquery.gccolor.1.0.3.js"></script>
	<script type="text/javascript">
		var $j = jQuery.noConflict();
		var testChange = function(target, color){
			target.val('#' + color);
		}
	  $j(document).ready(function(){
	  	$j('#input_1_17, #input_1_18, #input_1_19, #input_1_20, #input_1_21').gccolor({
				onChange : testChange
			});
		});
	</script>

not working :( with this script

http://desertseadesign.com/qr-card-order-form/

<script type="text/javascript">
		var $j = jQuery.noConflict();
		var testChange = function(target, color){
			target.val('#' + color);
		}
	  $j(document).ready(function(){
	  	$j('#input_9_33').gccolor({
				onChange : testChange
			});
		});
	</script>

not sure if the javascript is right

it works now. Thank you so much