1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Темизация Webform или нормальная форма подписки

Главные вкладки

Аватар пользователя zakraben zakraben 15 февраля 2012 в 19:08

Всем привет!
Поговорим немного о темизации конкретной формы созданной с помощью модуля webform
Для одного интернет магазина была поставлена задача создать красивую форму подписки. В ней должны присутствовать поля "Имя" "E-mail" ну и кнопка "Подписаться"
Нарисовал я форму, верстальщик её сделал примерно так:

Вот перечень модулей которые я использовал для создания самой подписки и стандартной формы:
simplenews
webform
webform_simplenews

После установки и настройки этих модулей я создал форму подписки. Ясное дело выглядит она стандартно и не так как нам нужно.

Итак что бы узнать что нам с этой формой делать — нужно просмотреть(узнать) её id и массив(узнаем где и что там находится). Для этого воспользуемся модулями devel и devel_themer
Устанавливаем их. По devel_themer есть ссылка на скринкаст прямо на странице проекта, по этому как его юзать я рассказывать не буду.
С помощью devel_themer выделяем нужную форму и просмотрим её ID
Я навел просто на кнопку сабмитта и увидел что мне нужно

Далее открываю файл template.php в своей теме и начинаю манипулировать с выводом массива этой формы. В этом поможет нам модуль Devel.

Напишем такую штуковину для нашей формы:

garland замените названием вашей темы. Просто я пока жду вёрстку разношу весь функционал и темизирую формы непосредственно в теме garland, затем портирую на Zen

function garland_webform_form_12($form){
dsm($form);
return $form;
}

Сохраним, обновим кэш.

Эта конструкция выведет в поле message страницы массив формы:

Теперь согласно полученным данным и form API начинаем темизировать форму!

Найдем необходимые поля:

Кнопка сабмитта и необходимый тип для замены

Поле "Ваше имя"

Поле "E-mail"

Все поля найдены, можно приступать.

Для начала немного изменим то что мы написали в template.php касательно нашей формы

function garland_webform_form_12($form){
//Сюда запишем наши изменения
return drupal_render($form);
}

Теперь я приведу весь код с небольшими комментариями. Всё должно быть понятно исходя из просмотра массива формы.

/** Темизация вебформы подписки на рассылку (webform id=12) */
function garland_webform_form_12($form){

// Изменяем тип кнопки на изображение, присваиваем класс и саму картинку
$form['actions']['submit']['#type'] = 'image_button';
$form['actions']['submit']['#src'] = drupal_get_path('theme', 'garland').'/images/sub-pod-button.jpg';
$form['actions']['submit']['#attributes']['class'] = 'podpis-button';

// Добавляем событие наведения на кнопку
$form['actions']['submit']['#attributes'] = array(
      'onmouseover' => "this.src='/themes/garland/images/sub-pod-button-hover.jpg'",
      'onmouseout' => "this.src='/themes/garland/images/sub-pod-button.jpg'",
    );

// Отключаем лэйблы(заголовки полей)
unset($form['submitted']['vashe_imya']['#title']);
unset($form['submitted']['e_mail']['#title']);

// Присваиваем значения
$form['submitted']['vashe_imya']['#value'] = 'Ваше имя';
$form['submitted']['e_mail']['newsletter_email_address']['#value'] = 'E-mail';

// Делаем исчезающий текст в полях
$form['submitted']['vashe_imya']['#attributes'] = array(
        'onBlur'=> "if (this.value.length == 0) {this.value='{$form['submitted']['vashe_imya']['#value']}'}",
        'onFocus'=> "if (this.value== '{$form['submitted']['vashe_imya']['#value']}') {this.value=''}"
  );
$form['submitted']['e_mail']['newsletter_email_address']['#attributes'] = array(
        'onBlur'=> "if (this.value.length == 0) {this.value='{$form['submitted']['e_mail']['newsletter_email_address']['#value']}'}",
        'onFocus'=> "if (this.value== '{$form['submitted']['e_mail']['newsletter_email_address']['#value']}') {this.value=''}"
  );

        return drupal_render($form);
}

Дальше всё решается с помощью CSS

garland замените названием вашей темы. Просто я пока жду вёрстку разношу весь функционал и темизирую формы непосредственно в теме garland, затем портирую на Zen

Надеюсь мой пост поможет начинающим и не очень усвоить азы темизации форм(в частности созданным модулем webform)
Спасибо!

Комментарии

Аватар пользователя zakraben zakraben 30 марта 2012 в 2:48

ecofish wrote:
Мазохисты какие-то. Поставить JQuery плагин религия не позволяет?

А зачем?
Я этот пост написал что бы люди могли на живом примере посмотреть и четко понять как с формами работат, а при чем тут JQuery к друпаловским формам я никак не пойму.