Темизация форм Drupal 7 на примере формы поиска

В общем случае для темизации любой формы в Drupal используется функция form_alter. Для темизации какой либо формы нам понадобится её form_id. Узнать его можно открыв исходный текст страницы (лучше воспользоваться помощью плагина web разработчика, например, firebug для firefox) и посмотреть на скрытый input с именем form_id.

Давайте темизируем форму поиска данного сайта. Вот так выглядит код формы:

  1. <form accept-charset="UTF-8" id="search-block-form" method="post" action="/">
  2.     <div>
  3.         <div class="container-inline">
  4.             <h2 class="element-invisible">
  5.                 Форма поиска
  6.             </h2>
  7.             <div class="form-item form-type-textfield form-item-search-block-form">
  8.                 <label for="edit-search-block-form--2" class="element-invisible">
  9.                     Поиск
  10.                 </label>
  11.                 <input type="text" class="form-text" maxlength="128" size="15" value="" name="search_block_form" id="edit-search-block-form--2" title="Введите ключевые слова для поиска.">
  12.             </div>
  13.             <div id="edit-actions" class="form-actions form-wrapper">
  14.                 <input type="submit" class="form-submit" value="Поиск" name="op" id="edit-submit">
  15.             </div><input type="hidden" value="form-7iPTPnE_tH1QZ7h7POH-QEcIhAbyAwlVMgjtz3Svf3A" name="form_build_id">
  16.             <input type="hidden" value="search_block_form" name="form_id">
  17.         </div>
  18.     </div>
  19. </form>

В самом низу мы видим значение form_id — search_block_form — это и есть искомое нами имя формы.

Далее приступаем к темизации. Вписываем в файл template.php следующий код. Здесь мы проверяем, что id формы равно search_block_form и только затем темизируем её.

  1. function имя_темы_form_alter(&$form, &$form_state, $form_id) {
  2.   if ($form_id == 'search_block_form') {
  3.     $form['search_block_form']['#title'] = t('Search'); // Меняем текст заголовка
  4.     $form['search_block_form']['#title_display'] = 'invisible'; // Выключаем отображение заголовка
  5.     $form['search_block_form']['#size'] = 20;  // Задаем размер поля ввода
  6.     $form['actions']['submit']['#value'] = t('GO!'); // Меняем текст кнопки поиска
  7.     $form['search_block_form']['#class'] = 'search-form';  // CSS-class текстового поля
  8.     $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/searchbutton.png'); // Путь к картинке кнопки, если мы хотим заменить текст на картинку
  9.        
  10.     $searchtext = 'Search'; // Задаем текст внутри поля. Здесь я использую английское значение, его можно легко перевести в админке. Можно писать и по-русски. Помещаем его в переменную, чтобы было удобно с ним работать
  11.     $form['search_block_form']['#default_value'] = t($searchtext);
  12. // Добавляем дополнительные атрибуты к текстовому полю. Убирает текст при наведении курсора в форму и возвращает его назад
  13.     $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = '" . t($searchtext) ."';}";
  14.     $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == '" . t($searchtext) . "') {this.value = '';}";
  15.     // Предотвращает от поиска текста по умолчанию
  16.     $form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='" . t($searchtext) . "'){ alert('" . t('Please enter a search') . "'); return false; }";
  17.     // Альтернативный (HTML5) атрибут, вместо использования javascript
  18.     $form['search_block_form']['#attributes']['placeholder'] = t($searchtext);
  19.   }  
  20. }

Так же можно темизировать конкретную форму, обращаясь к ней непосредственно. Здесь нам уже не нужно проверять, что id формы равно 'search_block_form', поэтому обертку if ($form_id == 'search_block_form') { } убираем полностью, оставляя только код

  1. function имя_темы_form_search_block_form_alter(&$form, &$form_state) {
  2. }