Tema formulir kontak

Saya ingin tema formulir kontak di Drupal 8. Saya ingin meletakkan divs di sekitar elemen formulir (menggunakan bootstrap).

Saya juga ingin meletakkan beberapa kelas pada elemen-elemen tertentu (tombol kirim, formulir itu sendiri).

Buka file YOURTHEMENAME.theme Anda dan tambahkan kode berikut:

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

}

Dan inilah hasilnya:

Jangan lupa untuk menghapus cache Anda;)

Anda cukup tema setiap bentuk yang Anda inginkan. Saya tidak suka metode oleh @rpayanm, karena sulit untuk maintane dan sulit dibaca, dengan bentuk besar ini tidak terjadi, hanya pembungkus tunggal dan struktur sederhana.

Setiap bentuk yang mencoba menggunakan tema sama dengan nama mesin mereka. Anda dapat menemukan nama templat ini $form['#theme']hanya dengan mengubah, selalu (atau hampir selalu) sama dengan nama mesin id formulir. Yang perlu Anda lakukan adalah mendaftarkan templat untuk itu. Anda perlu menerapkan hook_theme(). Anda dapat menulisnya di CUSTOMMODULE.module atau di THEMENAME.theme. Kunci tema harus sama dengan di $form['#theme'], sehingga otomatis menggunakannya, jika tidak, Anda perlu menambahkan yang baru melalui formulir ubah.

/**
 * 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 variabel dengan formulir.

Maka Anda harus membuat custom-form-template-name.html.twig(dengan nama templat Anda dari hook_theme ()).

Template minimal adalah

{{ form }}

Anda juga dapat mencetak setiap bidang dari formulir di mana Anda inginkan

{{ form.field_name }}

Di sini Anda dapat melakukan apa pun yang Anda inginkan dengan markup.

Anda juga dapat mengirimkan data tambahan ke templat dengan menerapkan template_preprocess_TEMPALTENAME

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

Dan kemudian gunakan dalam template

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

Saya pikir metode ini lebih fleksibel, bersih dan kuat.

Ps maaf untuk bahasa Inggris saya, berharap seseorang mengedit dan memperbaiki kesalahan saya :)

Contoh bentuk kompleks menggunakan metode ini.