[Drupal] How to add colorpicker option to a field of content type in Drupal

| | 1 min read

In one of our Drupal project we had to implement a feature where different background color has to be added for different content. We implemented this by adding an option to pick background color in the content type using Jquery Colorpicker. Read on to know how to implement this feature.

Jquery colorpicker provides an simple interface to select color in the same way you select color in Adobe Photoshop.Color picker can be added as a form element or in a field by setting the fieldtype to be "jQuery colorpicker".

Follow the steps to add color picker to your content type.

  • Enable Jquery Colorpicker in your site.
  • Download color picker library,library can be found here www.eyecon.ro/colorpicker/.
  • Extract the the zip file content to the colorpicker folder in your libraries folder.
  • In edit option of the content type a new field type jQuery colorpicker is available you can now add an field type to pick color by setting the field type as "jQuery colorpicker".

If you want to add an option to pick color for a custom form or an existing form using hook_form_alter() function then it can be implemented by setting form element type as "jquery_colorpicker".

$form['element'] = array(
  '#type' => 'jquery_colorpicker',
  '#title' => t('Color'),
  '#default_value' => 'FFFFFF',
);