Я бы хотел создать тему для контактной формы в Drupal 8. Я хотел бы поместить элементы div вокруг элементов формы (используя bootstrap).
Я также хочу поместить некоторые классы в определенные элементы (кнопка отправки, сама форма).
Я бы хотел создать тему для контактной формы в Drupal 8. Я хотел бы поместить элементы div вокруг элементов формы (используя bootstrap).
Я также хочу поместить некоторые классы в определенные элементы (кнопка отправки, сама форма).
Ответы:
Откройте файл YOURTHEMENAME.theme и добавьте следующий код:
function YOURTHEMENAME_form_contact_message_feedback_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
// Name
$form['name']['#prefix'] = '<div class="row"><div class="col-md-6"><div class="form-group">';
$form['name']['#suffix'] = '</div>';
$form['name']['#attributes']['placeholder'][] = $form['name']['#title'].'*';
$form['name']['#attributes']['class'][] = 'form-control';
unset($form['name']['#title']);
// Mail
$form['mail']['#prefix'] = '<div class="form-group">';
$form['mail']['#suffix'] = '</div>';
$form['mail']['#attributes']['placeholder'][] = $form['mail']['#title'].'*';
$form['mail']['#attributes']['class'][] = 'form-control';
unset($form['mail']['#title']);
// Subject
$form['subject']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
$form['subject']['widget'][0]['value']['#attributes']['placeholder'][] = $form['subject']['widget'][0]['#title'].'*';
$form['subject']['widget'][0]['#title'] = '';
unset($form['subject']['widget'][0]['value']['#title']);
$form['subject']['widget'][0]['#prefix'] = '<div class="form-group">';
$form['subject']['widget'][0]['#suffix'] = '</div></div>';
// Message
$form['message']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
$form['message']['widget'][0]['value']['#attributes']['placeholder'][] = $form['message']['widget'][0]['#title'].'*';
$form['message']['widget'][0]['#title'] = '';
unset($form['message']['widget'][0]['value']['#title']);
$form['message']['widget'][0]['#prefix'] = '<div class="col-md-6"><div class="form-group">';
$form['message']['widget'][0]['#suffix'] = '</div></div></div>';
// Submit
$form['actions']['#prefix'] = '<div class="clearfix">';
$form['actions']['#suffix'] = '</div>';
$form['actions']['submit']['#attributes']['class'][] = 'btn';
$form['actions']['submit']['#attributes']['class'][] = 'btn-success';
$form['actions']['submit']['#attributes']['class'][] = 'pull-right';
}
И вот ваш результат:
Не забудьте очистить ваши кеши;)
Вы можете просто тему каждой формы, как вы хотите. Мне не нравится метод @rpayanm, потому что он труден для понимания и трудно читаем, с большими формами это не так, просто одиночная оболочка и простая структура.
Каждая форма, пытающаяся использовать тему, соответствует имени машины. Вы можете найти это имя шаблона $form['#theme']
просто по alter, оно всегда (или в большинстве случаев) совпадает с именем машины с идентификатором формы. Что вам нужно сделать, это зарегистрировать шаблон для него. Вам нужно реализовать hook_theme()
. Вы можете написать это в CUSTOMMODULE.module или в THEMENAME.theme. Ключ темы должен быть таким же, как и в $form['#theme']
, поэтому он автоматически использует его, в противном случае вам нужно добавить новый через форму alter.
/**
* Implements hook_theme().
*/
function MODULENAME_theme($existing, $type, $theme, $path) {
return [
'FORM_ID_THEME' => [
'template' => 'custom-form-template-name',
'render element' => 'form',
]
];
}
Drupal pass $ form переменная с формой.
Затем вы должны создать custom-form-template-name.html.twig
(с вашим именем шаблона из hook_theme ()).
Минимальный шаблон
{{ form }}
Вы также можете распечатать каждое поле из формы, где вы хотите
{{ form.field_name }}
Здесь вы можете делать все, что вы хотите с разметкой.
Вы также можете передать дополнительные данные в шаблон, реализовав template_preprocess_TEMPALTENAME
function template_preprocess_FORM_ID_THEME(&$variables) {
$variables['example'] = 'This is added via preprocess';
}
А потом использовать в шаблоне
{{ example }}
<div class="first-field">
{{ form.first_field }}
</div>
<div class="second-field">
{{ form.second_field }}
</div>
<div class="buttons">
{{ form.submit }}
{{ form.preview }}
</div>
{#
Don't forget to add printing form special info at the end.
Without this data form will not working propertly.
#}
{{ form.form_build_id }}
{{ form.form_token }}
{{ form.form_id }}
Я думаю, что этот метод более гибкий, чистый и мощный.
Ps извините за мой английский, надеюсь, что кто-то отредактирует и исправит мои ошибки :)
Пример сложной формы с использованием этого метода.
{{ form.submit }}
на{{ form.actions.submit }}
{{ form }}
, это печать всей формы. Но если я использую определенное поле, как {{ form.my_field }}
, ничего не отображается. Любая идея, как мы можем отобразить каждое поле пользовательской формы пакета сущностей?
{{ form }}
. Я предлагаю после печати {{ form }}
все элементы формы будут помечены как '#rendered' => TRUE
и не будут отображаться в ближайшее время. Если вы не хотите использовать этот метод формы тем, вы должны печатать каждое поле отдельно. В drupal_render_children()
Drupal 8 его нет, если вы не пишете это самостоятельно. В любом случае по умолчанию это приведет к дублированию, поэтому попробуйте распечатать каждое поле вручную.
{{ form }} & {{ form.my_field }}
вместе. Сначала попробовал только с {{ form }}
, здесь я могу видеть всю форму. Затем удалили {{ form }}
из шаблона, затем попытались для каждого поля формы отдельно, как это {{ form.my_field }}, etc
, но dint получить любой положить. Ничего не отображается
template_preprocess_FORM_ID_THEME(&$variables)
. В этом препроцессоре вы можете добавлять новые переменные, изменять существующие, включая элементы формы. Я никогда не видел это, {{ form.field_name.widget }}
и я часто пишу формы. Похоже, это поле специально создано или добавлено сторонним модулем? Я думаю, что это разрешено, но не правило для других. Я рекомендую вам начать с препроцессора и просто посмотреть, $variables['form']
что в нем содержится.