Тема контактної форми

Я хотів би надати тему контактної форми в Drupal 8. Я хотів би розмістити знаки навколо елементів форми (використовуючи завантажувальний інструмент).

Я також хочу покласти деякі класи на певні елементи (кнопка подання, сама форма).

Відкрийте свій файл 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, воно завжди (або в більшості випадків) збігається з назвою машини id id форми. Що вам потрібно зробити, це зареєструвати шаблон для нього. Вам потрібно реалізувати 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(з назвою вашого шаблону з moll_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 вибачте за мою англійську, сподіваюся, що хтось відредагує та виправить мої помилки :)

Приклад складної форми з використанням цього методу.