Как добавить jQuery Colorpicker в кастомную форму

Рассмотрим вариант добавления поля для выбора цвета, которое будет, по сути, обычным текстовым полем.

При этом не будем устанавливать ни одного лишнего модуля!

В качестве готового решения будем использовать замечательную jQuery-библиотеку Spectrum.

Ее необходимо скачать с оф. страницы, или из Github-репозитория.

Содержимое извлекаем в папку libraries (обычно - sites/all/libraries). И переименовать в "bgrins-spectrum".

Далее, в своей форме подключим ее:

// Настройки для Спектрума
$spectrum_js = 'jQuery(".spectrum-color-picker").spectrum({
  showInput: true,
  allowEmpty: true,
  showAlpha: true,
  showInitial: true,
  showInput: true,
  preferredFormat: "hex3",
  clickoutFiresChange: true,
  showButtons: false
});';

// Подключение библиотеки и настроек
$form['#attached'] = array(
  'css' => array(
    libraries_get_path('bgrins-spectrum') . '/spectrum.css',
  ),
  'js'  => array(
    libraries_get_path('bgrins-spectrum') . '/spectrum.js',
    array(
      'data'  => $spectrum_js,
      'type'  => 'inline',
      'scope' => 'footer',
    ),
  ),
);

Теперь можно создавать обычные textfield'ы, совсем немного их модернизируя:

$form['my_color_field'] = array(
  '#type'          => 'textfield',
  '#default_value' => $default_value, // Можно передавать обычную строку, с валидным форматом цвета (HEX, HSL[A], RGB[A], COLOR NAME)
  '#attributes'    => array('class' => array('spectrum-color-picker')), // Класс нужен для автоматической подхватки поля
  '#title'         => t('Color'),
);

В $form_state будет доступен как значение обычного текстового поля:

$form_state['values']['my_color_field'];

И все круто работает, т.к. плагин обладает огромным количеством настроек.

Сделано по этой инструкции.