Создание, продвижение сайтов
40-33-54

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

25 августа 2016

В общем случае для темизации любой формы в 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) {

}
Сделайте заказ с сайта и получите 10% скидку на услугу

Заказ услуги с сайта raybin.ru

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
Заказать бесплатную SEO-консультацию

Запрос бесплатной SEO - консультации с сайта raybin.ru

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
Письмо в компанию Райбин

Письмо в компанию RAYBIN

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.