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

Темизация формы

05.09.2017

Здравствуйте! Имеется готовая верстка веб формы. Создал веб форму через модуль webform. Решил темизировать веб форму, создал файл в свой теме: webform-form-37.tpl.php. Все отлично, шаблон подключается только для [id] формы. Но мучаюсь с тем что друпал добавляет свои классы в div-ы, которые обрамляют label и input. Поле вывожу через print drupal_render($form['submitted']['telefon']); В настройках поля не добавлял никаких классов. Вывожу форму через hook_form_alter() там тоже нет тех классов, которые добавляет друпал. Можно ли как то вывести только поле input либо как мне убрать те классы которые добавляет друпал?

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

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

Profile picture for user pantey
pantey
05.09.2017

вам в помощь - theme_form_element

Profile picture for user Алексей
SUNN
07.09.2017

Спасибо! Посмотрел API этой функции, действительно это возможно то что мне нужно, но не совсем разобрался как переопределить с помощью этой функции конкретные элементы формы: каждое поле обрамляется таким образом http://pastenow.ru/21A1B.  В API http://pastenow.ru/21A1I в массив $element имеются ключи, это я так понимаю атрибут name у input ? Пытаюсь просто переопределить значение ключа 'class' массива $attributes http://pastenow.ru/21A1Y но видимо что-то не так делаю. Чистка кеша не помогает.

Profile picture for user pantey
pantey
07.09.2017

В массив передается много чего:

  • Тип элемента формы
  • Классы CSS
  • Дополнительные атрибуты 
  • и т.д.

Соответственно для переопределения, например текстового элемента формы (<input type="text">), необходимо осуществить проверку по ключу #type

<?php

if(!empty($element['#type']) && $element['#type'] == 'textfield'){
// Здесь ваш код
}

Названия типов полей соответствует Form API

Profile picture for user Алексей
SUNN
10.09.2017

Спасибо за помощь. Но для формы созданной через webform почему-то функция не переопределяет параметры формы. Попробовал переопределить стандартную форму авторизации, все отработало отлично. 

function mytheme_form_element($variables) {
	$element = &$variables['element'];

	if ( $element['#name'] == 'name' ) {
		$attributes['class'] = array('form-name');
	}

	$output = '<div data-id' . drupal_attributes($attributes) . '>' . "\n";
	
	$output .= "</div>\n";

	return $output;
}

В итоге: 

<div data-id="" class="form-name">
  <label for="edit-name">Имя пользователя <span class="form-required" title="Это поле обязательно для заполнения.">*</span></label>
 <input type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required">
</div>

Когда переопределяю обертку для поля name =='submitted[telefon]'

function mytheme_form_element($variables) {
	$element = &$variables['element'];

	if ( $element['#name'] == 'submitted[telefon]' ) {
		$attributes['class'] = array('form-telefon');
	}
	
	$output = '<div ' . drupal_attributes($attributes) . '>' . "\n";

	$output .= "</div>\n";

	return $output;
}

из http://pastenow.ru/21A1B, то результат не изменяется.  Кэш чищу, результат тот же что и на скриншоте http://pastenow.ru/21A1B

 

Profile picture for user pantey
pantey
12.09.2017

так если вам необходимо просто добавить классы к элементам формы, то не нужно переопределять вывод всех элементов формы,  - достаточно воспользоваться hook_form_FORM_ID_alter();

Profile picture for user Алексей
SUNN
15.09.2017

Нет, мне как раз нужно не добавить, а удалить классы, которые добавляет drupal типа "form-item webform-component webform-component-textfield webform-component--telefon webform-container-inline". Через hook_form_alter у меня получилось добавить класс к обертке элемента: 

function mytheme_form_alter(&$form, $form_state, $form_id) {  
	if($form['#id'] == 'webform-client-form-37'){
		$form['submitted']['telefon']['#wrapper_attributes']['class'] = array('class-example');	
	}
}

В итоге:

<div class="class-example form-item webform-component webform-component-textfield webform-component--telefon webform-container-inline">
  <label for="edit-submitted-telefon">Телефон <span class="form-required" title="Это поле обязательно для заполнения.">*</span></label>
 <input required="required" type="text" id="edit-submitted-telefon" name="submitted[telefon]" value="" size="60" maxlength="128" class="form-text required">
</div>

Тут все норм, но все же нужно удалить эти классы: "form-item webform-component webform-component-textfield webform-component--telefon webform-container-inline"

Profile picture for user pantey
pantey
15.09.2017

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

Profile picture for user Алексей
SUNN
16.09.2017

Блин друпал после битрикса такая жесть, слов просто нет :)

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

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