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

Добавление классов, id, плейсхолдера к полям формы

Мне довольно часто проходилось иметь дело с готовой версткой, которую необходимо натянуть на друпал. В этом случае куда проще добавить нужные классы к элементам, нежели подгонять готовый css к стандартной верстке движка. Итак, у нас есть форма, чтобы ее изменить, воспользуемся функцией hook_form_alter(). Ее нужно поместить в файл template.php в папке темы.

<?php
/**
* Implements hook_form_alter().
*/
function "название темы"_form_alter(&$form, &$form_state, $form_id) {
 
 
// находим нужную форму по ID.
  // ID проще всего просто глянуть в firebug или аналогичном инструменте
 
if($form['#id'] == 'Form_ID') {
   
   
// Добавление класса ко всей форме
   
$form['#attributes']['class'][] = 'cta-form';
   
   
// Добавление класса к полю. Определить нужное поле просто - его название
    // совпадает с тем, что вы вводите при создании поля в админке
   
$form['submitted']['ordername']['#attributes']['class'] = array('form-control', 'cta-input');
   
   
// Добавляем placeholder
   
$form['submitted']['ordername']['#attributes']['placeholder'] = 'Ваше имя';
   
   
// Добавляем класс к кнопке отправки формы
   
$form['actions']['submit']['#attributes']['class'] = array('form-control', 'order-btn');
  }
}
?>

После добавления кода очищаем кеш.
Этот пример взят из моей работы, когда я прикручивал шаблон на Twitter Bootstrap, и добавил к форме классы, используемые в этом фреймворке.

Отдельный шаблон для блока формы

Webform позволяет создать форму не только в виде ноды, но и в виде блока (надо поставить галку «Available as block» в настройках формы). Если нужно при этом форму обернуть в дополнительную разметку, то можно сделать отдельный шаблон для данного блока. Для этого надо создать файл с названием block--webform--client-block-"id webform ноды".tpl.php

Напомню, стандартное содержание шаблона блока выглядит так:

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php print render($title_prefix); ?>
<?php if ($block->subject): ?>
  <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
<?php endif;?>
  <?php print render($title_suffix); ?>

  <div class="content"<?php print $content_attributes; ?>>
    <?php print $content ?>
  </div>
</div>

А вот пример шаблона блока, который сделан в виде всплывающего окна в теме Bootstrap:

<div class="modal fade" id="callbackModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body cta-form">
        <h2 class="cta-heading">
          ЗАКАЗАТЬ ОБРАТНЫЙ ЗВОНОК
        </h2>
        <?php print $conтent ?>
        <p class="cta-additional">
          Мы гарантируем конфиденциальность ваших данных
        </p>
      </div> <!-- /.modal-body -->
    </div> <!-- /.modal-content -->
  </div> <!-- /.modal-dialog -->
</div> <!-- #orderModal -->

Редирект после отравки формы из блока

В настройках формы можно указывать, куда направляется посетитель после отправки формы. Это может быть текущая страница (т. е. нет перенаправления), собственная страница webform или любая другая. Но когда я отправлял форму из блока, то эти настройки на работали (мне надо было, чтобы посетитель оставался на той же странице). Оказывается, в настройках самого блока надо отметить чекбокс «Show all webform pages in block». После этого все работает как надо.

webform block redirect

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.