Тема контактной формы

Я бы хотел создать тему для контактной формы в 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 извините за мой английский, надеюсь, что кто-то отредактирует и исправит мои ошибки :)

Пример сложной формы с использованием этого метода.