Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Темизируем веб-формы через файл webform.tpl.php.

Дата:11.12.14 в 2:00
Раздел: 

После создания веб формы (посредством использования модуля webform) пришло время приступить к термизации. Стандартно друпал оформит форму примерно так:

Webform Drupal 7

Мы оформим ее таблицей. Первая строка этой таблицы будет содержать поля «имя» и «фамилия». Во второй будет находиться поле с адресом электронной почты, ну а третья строка – это то поле, в котором находиться текст сообщения.

1. Для начала стоит узнать id формы. Он отражается в адресной строке браузера в момент создания формы. Есть еще один вариант узнать id формы – через инструменты веб-разработчика в вашем браузере, к примеру через Firebug.

Узнать ID Webform

2. Переходим в корень шаблона темы. Там надо создать файл с именем. Оно должно выглядеть так: webform-form- id_формы.tpl.php.  

Создание файла tpl.php для webform Drupal

В этот файл мы впишем html код, которым хотим обрамить нашу форму. Не забываем о UTF-8 без BOM кодировке файла и очистке кеша сайта для того, чтобы друпал определил наш новый файл в теме.

Темизация webform Drupal

3. После вывода таблицы выполняется вывод полей в каждую ее строчку. Все поля мы можем захватить кодом:

<?php print drupal_render($form['submitted']);?>

Чтобы вытащить не все поля сразу , а каждое по отдельности, надо в стандартный запрос дописать ключ конкретного поля (машинное имя, которое задается при создании поля).

Ключ поля webform Drupal

<?php print drupal_render($form['submitted']['ключ поля']); ?>

4. Запрос надо будет создать для каждого конкретного поля.

5. Теперь осталось только вывести кнопку отправки формы. Выводим ее вниз формы. Кнопку мы выводим запросом:

<?php print drupal_render_children($form);?>

В конечном счете наш код выглядит как-то так:

Темизация webform Drupal

В результате на сайте появляется полноценная веб форма со всеми необходимыми полями и кнопкой для ее последующей отправки. Дальнейшее же ее оформление по вашему вкусу уже лежит в пределах css. Результат нашей работы:

Темизация webform Drupal

Оценок: 6 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по Drupal (в открытом доступе)