Темизация форм Drupal 7 на примере формы поиска
В общем случае для темизации любой формы в Drupal используется функция form_alter. Для темизации какой либо формы нам понадобится её form_id. Узнать его можно открыв исходный текст страницы (лучше воспользоваться помощью плагина web разработчика, например, firebug для firefox) и посмотреть на скрытый input с именем form_id.
Давайте темизируем форму поиска данного сайта. Вот так выглядит код формы:
<form accept-charset="UTF-8" id="search-block-form" method="post" action="/"> <div> <div class="container-inline"> <h2 class="element-invisible">Форма поиска</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <label for="edit-search-block-form--2" class="element-invisible">Поиск</label> <input type="text" class="form-text" maxlength="128" size="15" value="" name="search_block_form"id="edit-search-block-form--2" title="Введите ключевые слова для поиска."></div> <div id="edit-actions" class="form-actions form-wrapper"> <input type="submit" class="form-submit" value="Поиск" name="op" id="edit-submit"></div> <input type="hidden" value="form-7iPTPnE_tH1QZ7h7POH-QEcIhAbyAwlVMgjtz3Svf3A" name="form_build_id"> <input type="hidden" value="search_block_form" name="form_id"></div> </div> </form>
В самом низу мы видим значение form_id — search_block_form — это и есть искомое нами имя формы.
Далее приступаем к темизации. Вписываем в файл template.php следующий код. Здесь мы проверяем, что id формы равно search_block_form и только затем темизируем её.
function имя_темы_form_alter(&$form, &$form_state, $form_id) { if ($form_id == 'search_block_form') { $form['search_block_form']['#title'] = t('Search'); // Меняем текст заголовка $form['search_block_form']['#title_display'] = 'invisible'; // Выключаем отображение заголовка $form['search_block_form']['#size'] = 20; // Задаем размер поля ввода $form['actions']['submit']['#value'] = t('GO!'); // Меняем текст кнопки поиска $form['search_block_form']['#class'] = 'search-form'; // CSS-class текстового поля $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() .'/images/searchbutton.png'); // Путь к картинке кнопки, если мы хотим заменить текст на картинку $searchtext = 'Search'; // Задаем текст внутри поля. Здесь я использую английское значение, его можно легко перевести в админке. Можно писать и по-русски. Помещаем его в переменную, чтобы было удобно с ним работать $form['search_block_form']['#default_value'] = t($searchtext); // Добавляем дополнительные атрибуты к текстовому полю. Убирает текст при наведении курсора в форму и возвращает его назад $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = '" . t($searchtext)."';}"; $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == '" . t($searchtext) . "') {this.value = '';}"; // Предотвращает от поиска текста по умолчанию $form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='" . t($searchtext) . "'){ alert('" .t('Please enter a search') . "'); return false; }"; // Альтернативный (HTML5) атрибут, вместо использования javascript $form['search_block_form']['#attributes']['placeholder'] = t($searchtext); } }
Так же можно темизировать конкретную форму, обращаясь к ней непосредственно. Здесь нам уже не нужно проверять, что id формы равно 'search_block_form', поэтому обертку if ($form_id == 'search_block_form') { } убираем полностью, оставляя только код
function имя_темы_form_search_block_form_alter(&$form, &$form_state) { }