Помощь начинающим веб
разработчикам

Темизация веб-формы в Drupal 7. Файл webform-tpl.php

25.04.2013

Сегодня начнём изучение темизации веб-форм в Drupal 7, напомню, что самым популярным при создании своих веб-форм является модуль webform. Как создать свою веб-форму вы можете почитать вот здесь, на этом я останавливаться не буду. В качестве примера я буду использовать стандартный шаблон Drupal – Bartik, и создам форму из нескольких полей (2х текстовых полей, 1го поля с электронной почтой и 1го поля с текстовой областью), в результате данная форма у меня выглядит вот так

И имеет следующие настройки

Теперь приступим к самой темизации. Например давайте разместим данную форму в таблицу, в первой строке которого у нас будут находится поля с «Именем» и «Фамилией», во второй строке разместим поле «E-mail», ну а в третьей строке выведем поле «Текст сообщения». Приступим, первое что нам необходимо – это узнать id нашей формы, в моём случае моя форма имеет #360, свой id вы можете увидеть в адресной строке браузера при создании формы, либо через Firebug. Теперь переходим в корень вашего шаблона и создаём файл с именем

  1. webform-form-idвашейформы.tpl.php

в моём случае файл будет иметь имя

  1. webform-form-360.tpl.php

и впишем первым делом в него вывод нашей таблицы

  1. <table border="1">
  2. <thead>
  3. <tr>
  4. <td>
  5. <h3>наша тестовая форма</h3>
  6. </td>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td> </td>
  12. <td> </td>
  13. </tr>
  14. <tr>
  15. <td> </td>
  16. </tr>
  17. <tr>
  18. <td> </td>
  19. </tr>
  20. </tbody>
  21. </table>

И посмотрим на результат, не забудьте только про кодировку UTF-8 без BOM, и очистить кеш сайта, вот что в итоге у нас получается

Картина конечно не самая наглядная но тем не менее. Таблицу мы вывели, теперь осталось нам вывести лишь поля в каждую строчку таблицы. В webform поля выводятся из массива, как

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

Таким образом мы выведем все поля из данного массива, а нам же нужно каждое поле по отдельности, сложности с этим у вас не должно возникнуть, так как массив submitted является многомерным, и чтобы вытащить конкретное поле, нужно лишь дописать ключ данного поля и выглядеть запрос будет вот так

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

Ключом поля является машинное имя создаваемого поля, которое вы задаете при создании данного поля

В результате вывод поля «Имя» будет выглядеть, как

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

На странице это выглядит вот так

Теперь то же самое проделаем для всех остальных полей нашей формы, это вы сделаете самостоятельно, я лишь покажу как должно получиться у вас

и для красоты я добавил дополнительные столбцы в таблице, в результате мой код выглядит вот так

Как мы видим с поставленной задачей мы справились, осталось лишь вывести саму кнопку отправки формы, вывод производится как

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

Выведем кнопку после таблицы, в результате конечный код моей формы выглядит так

Посмотрим результат,

Как мы видим, теперь у нас полноценная веб-форма, с полями и кнопкой отправки. Далее в уроках мы рассмотрим еще различные файлы модуля webform, которые упрощают стилизацию вывода практически каждого элемента формы, а пока на этом всё.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (34)

Profile picture for user Артур
Jakson
13.07.2013

Добрый день! Помоги плиз разобраться.. когда я вывожу код кнопки http://clip2net.com/s/5nXiuQ
То у меня выводится все форма... хотя я в коде указал только одно поле и кнопку http://clip2net.com/s/5nXj05

Profile picture for user Артур
Jackson
24.07.2013

Интересно.. Админы сайт вообще посещают?
Или не знают ответы на вопросы??

Зачем тогда пост писать.

Profile picture for user pantey
pantey
24.07.2013

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

Profile picture for user Артур
Алексей
13.12.2013

Внизу у каждого материала есть форма для отправки сообщений - создана модулем web-form! Она выходитcя на страницу в виде ссылки, с помощью модуля popup!

Как сделать, чтобы название материала подставлялось автоматически в web-форму?

Profile picture for user Артур
Александр
06.04.2014

Отличная статья, как всегда к месту

Profile picture for user Артур
Дмитрий
17.06.2014

А как подменить системные классы форм или добавить к ним свои пользовательские классы?

Profile picture for user pantey
pantey
18.06.2014

через

hook_form_alter()
Profile picture for user Артур
Дмитрий
18.06.2014

Мне надо присвоить или подменить на странице формы входа классы кнопке войти и инпутам ввода логина и пароля. Покажите пожалуйста на примере как это все будет реализовано. Спасибо!

Profile picture for user pantey
pantey
18.06.2014

вот так:

<?php
/**
 * Implements hook_form_alter().
 */
 
 function yourTheme_form_alter(&$form, $form_state, $form_id) {  
  if($form['#id'] == 'user-login'){
	$form['name']['#attributes']['class'][] = 'your-class-name';
	$form['pass']['#attributes']['class'][] = 'your-class-pass';
	$form['actions']['submit']['#attributes']['class'][] = 'your-class-button';
  }
}
?>
Profile picture for user Артур
Дмитрий
18.06.2014

Огромное благодарю!!!

Profile picture for user Артур
Евгений
16.10.2014

Ваша статья бы решила почти все мои проблемы, но... Нихрена не выходит((( Просто с формой моей ничего не происходит. Не меняется. Кэш чистил.
Скажите пожалуйста, это нормально, что у меня id формы вот такого вида:
webform-client-form-4
Как тогда должен правильно называться файл? Может быть я его не в ту директорию кладу?
картинка
Заранее прошу прощения за тупость. Всю жизнь до этого пользовал жумлу. Решил вот потрогать друпал и пока ничерта не понимаю).

Profile picture for user pantey
pantey
16.10.2014

так в статье же написан шаблон, как должно строится название... В вашем случае название файла будет как

webform-form-4.tpl.php
Profile picture for user Артур
Andrey
10.03.2015

Большое спасибо за такую статью. А вот как можно поставить на кнопку цель из яндекс мертрики, вот такое вот (onclick="ya_hit('TARGET_NAME'); return true;)
??

Profile picture for user pantey
pantey
11.03.2015

примерно так:

<?php
$form['actions']['submit']['#attributes'] = array('onclick' => "ya_hit('TARGET_NAME'); return true;");
Profile picture for user Артур
Anton
03.07.2015

Спасибо автору за замечательную статью!
Подскажите, пожалуйста, как вывести кнопку "отправить" по центру?

Profile picture for user Артур
haritonov
18.09.2015

Здравствуйте. Все сделал, как описано в примере, форма вывелась на сайт, но есть одна проблема. Веб Форма обратной связи, которая изначально была на сайте, созданная через админку - не исчезла, а оказывается под созданной веб формой из данного примера. Объясните пожалуйста, как сделать, чтоб стандартная веб форма более не отображалась?

Profile picture for user pantey
pantey
21.09.2015

не понимаю о чем вы.

Profile picture for user Артур
haritonov
21.09.2015

Я создал форму обратной связи через webform, она отображается в region-sidebar-second, делаю по вашему примеру все, создаю webform-form-3.tpl.php
Но получается так, что стандартно созданная форма остается на странице, а созданная webform-form-3.tpl.php - встает поверх стандартной. А как сделать чтоб отображалась только лишь созданная webform-form-3.tpl.php обратная связь?

Profile picture for user pantey
pantey
21.09.2015

скидывайте код вашего webform-form-3.tpl.php

Profile picture for user Артур
haritonov
21.09.2015
<table border="1">
    <thead>
        <tr>
            <td><h2><font color="#0047AB"> Запишитесь на первое бесплатное занятие:</font></h2></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border-color: rgb(43, 173, 216);"><?php print drupal_render($form['submitted']['Name']);?></td>
            
        </tr>
        <tr>
            <td style="border-color: rgb(43, 173, 216);"><?php print drupal_render($form['submitted']['Age']);?></td>
        </tr>
        <tr>
            <td style="border-color: rgb(43, 173, 216);"><?php print drupal_render($form['submitted']['Object']);?></td>
        </tr>
        <tr>
            <td style="border-color: rgb(43, 173, 216);"><?php print drupal_render($form['submitted']['Intent']);?></td>
        </tr>
        <tr>
            <td style="border-color: rgb(43, 173, 216);"><?php print drupal_render($form['submitted']['e_mail']);?></td>
        </tr>
        <tr>
            <td style="border-color: rgb(43, 173, 216);"><?php print drupal_render($form['submitted']['phone']);?></td>
        </tr>
    </tbody>
</table>
Profile picture for user pantey
pantey
21.09.2015

у вас отсутствует

<?php print drupal_render_children($form);
Profile picture for user Артур
haritonov
21.09.2015

А как вставить код в комментарий?

Profile picture for user Артур
haritonov
21.09.2015

И из-за этого стандартная форма остается а webform-form-3.tpl.php оказывается поверх?

Profile picture for user pantey
pantey
21.09.2015

первый раз, при рендере страницы у вас вызываются сами элементы формы, который вы указали в вашем webform-form-3.tpl.php, далее вызывается рендер формы, который вызывается по умолчанию, если он не указан явно в вашем файле.

Profile picture for user Артур
haritonov
21.09.2015


Посмотрите, получается, что стандартный заголовок тоже присутствует, подскажите, как его убрать, чтоб только отображалась форма созданная через webform-form-3.tpl.php

Profile picture for user Артур
haritonov
21.09.2015

http://gumanitarka.com/sites/all/themes/micro_zymphonies_theme/images/webform-form-3.jpg

Profile picture for user pantey
pantey
22.09.2015
Profile picture for user Артур
dm
21.10.2015

Помогите, уважаемый!
После установки своего шаблона - форма перестала загружать файлы.
Пишет: Неустранимые ошибки. Размер загружаемого файла вероятно превысил максимально допустимый размер файла (1000 МБ), который поддерживает данный сервер.
После удаления шаблона - все работает.
Может надо как-то по другому написать вывод поля (тип поля "Файл")?
Сейчас так:

Profile picture for user Артур
Psyh
04.11.2015

Как добавить атрибут к

? Примерно такой onsubmit="yaCounter..."?
Для этого не нужно переписывать шаблон насколько я понимаю. Но что вписать в template.php?
Profile picture for user Артур
Psyh
04.11.2015

Теги вырезаются.
* Как добавить атрибут к тегу form?

Profile picture for user Артур
Psyh
04.11.2015

Сделал сам.

function themename_form_alter(&$form, &$form_state, $form_id) {
 
  // находим нужную форму по ID.
  // ID проще всего просто глянуть в firebug или аналогичном инструменте
  if($form['#id'] == 'webform-client-form-88') {
    // Добавление класса ко всей форме
    $form['#attributes']['onsubmit'] = array("yaCounter.......;");
  }
}
Profile picture for user Артур
Наташа
21.06.2016

Здравствуйте подскажите пожалуйста можно ли присвоить классы форме входа на сайт с помощью шаблона типа юзер-логин.tpl.php, и как это сделать?
пролистала по поиску много всего и везде почти одно и тоже. у вас хоть разумно написано как это сделать через темплат.
Но мне нужен шаблон ибо страничка входа будет с большим объемом темизации и всяких плюшек..
шаблон под такую страничку я сделала - не могу понять как в шаблоне прописать форму по кашерному а не с фаербуга с уже со значениями

Profile picture for user pantey
pantey
22.06.2016

Если вам нужно добавить классы CSS для полей формы то используйте

function themeName_form_alter(&$form, $form_state, $form_id) {
  if ($form_id == 'user_login_block' || $form_id == 'user_login') {
    // … ваш код
  }
}

Если же вам необходимо добавить разметку для полей формы, то вам необходимо зарегистрировать новый шаблон шаблон через hook_theme()

function MYMODULE_theme() {
  return array(
    'login_form' => array( 
      'render element' => 'form', 
      'template' => 'custom_login_form_template', 
    ),
  );
}

После чего вам необходимо создать файл внутри вашей темы

custom_login_form_template.tpl.php

и в этом файле реализовать вашу разметку. Все поля формы будут находится в переменной $form, которую не забудьте пропустить через render()

<?php print render($form['login']); ?>
Profile picture for user Артур
Наташа
25.06.2016

Простите, не могли бы вы чуть подробнее описать второй вариант с разметкой. первый вариант работает но мне этого не достаточно, а вот со вторым вариантом мне не совсем понятно как делать разметку.
Если можно - короткий пример кода для разметки в шаблоне. Буду очень признательна.Спасибо

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии