Chủ đề một hình thức liên lạc

Tôi muốn tạo chủ đề cho một biểu mẫu liên hệ trong Drupal 8. Tôi muốn đặt div xung quanh các thành phần của biểu mẫu (sử dụng bootstrap).

Tôi cũng muốn đặt một số lớp trên các yếu tố nhất định (nút gửi, chính biểu mẫu).

Mở tệp YOUTHEMENAME.theme của bạn và thêm mã sau đây:

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';

}

Và đây là kết quả của bạn:

Đừng quên xóa bộ nhớ cache của bạn;)

Bạn có thể chỉ cần chủ đề mọi hình thức như bạn muốn. Tôi không thích phương pháp của @rpayanm, vì nó khó bảo trì và khó đọc, với các hình thức lớn thì đây không phải là trường hợp, chỉ là một trình bao bọc đơn và cấu trúc đơn giản.

Mỗi hình thức cố gắng sử dụng chủ đề bằng với tên máy của họ. Bạn có thể tìm thấy tên mẫu này $form['#theme']chỉ bằng cách thay đổi, nó luôn luôn (hoặc trong hầu hết các lần) giống như tên máy id mẫu. Những gì bạn cần làm là đăng ký mẫu cho nó. Bạn cần thực hiện hook_theme(). Bạn có thể viết nó trong CUSTOMMODULE.module hoặc trong THEMENAME.theme. Khóa chủ đề phải giống như trong $form['#theme'], để nó tự động sử dụng nó, nếu không, bạn cần thêm khóa mới thông qua thay đổi biểu mẫu.

/**
 * Implements hook_theme().
 */
function MODULENAME_theme($existing, $type, $theme, $path) {
  return [
    'FORM_ID_THEME' => [
      'template' => 'custom-form-template-name',
      'render element' => 'form',
    ]
  ];
}

Drupal vượt qua biến $ form với dạng.

Sau đó, bạn phải tạo custom-form-template-name.html.twig(với tên mẫu của bạn từ hook_theme ()).

Mẫu tối thiểu là

{{ form }}

Bạn cũng có thể in mọi lĩnh vực từ mẫu mà bạn muốn

{{ form.field_name }}

Ở đây bạn có thể làm bất cứ điều gì bạn muốn với đánh dấu.

Bạn cũng có thể truyền dữ liệu bổ sung cho mẫu bằng cách triển khai template_preprocess_TEMPALTENAME

function template_preprocess_FORM_ID_THEME(&$variables) {
  $variables['example'] = 'This is added via preprocess';
}

Và sau đó sử dụng trong mẫu

{{ 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 }}

Tôi nghĩ rằng phương pháp này là fliexible, sạch sẽ và mạnh mẽ.

Ps xin lỗi vì tiếng Anh của tôi, hy vọng ai đó chỉnh sửa và sửa lỗi của tôi :)

Ví dụ về hình thức phức tạp sử dụng phương pháp này.