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).

theming 8 emails

— Johan Haest
sumber

Saya sarankan menjelaskan masalah Anda secara lebih rinci dan mengatakan apa yang sudah Anda coba. Itu akan menunjukkan beberapa inisiatif dan membantu orang lain memberi Anda jawaban yang lebih baik.

— Aram Boyajyan

Jawaban:

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: masukkan deskripsi gambar di sini

Jangan lupa untuk menghapus cache Anda;)

— rpayanm
sumber

Jika tema saya bernama 'abc', dan formulir saya bernama 'contact us', apa yang saya beri nama fungsinya?

— Daniel Dewhurst

{themename} _form_contact_message_ {formname} _form_alter

— Johan Haest

Ini luar biasa!!!

— ipwa

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.

— Niklan
sumber

Perhatikan bahwa bagi saya, saya telah mengubah {{ form.submit }}ke{{ form.actions.submit }}

— mikeDOTexe

@Niklan: Saya telah mengikuti kode yang sama di atas untuk formulir bundel entitas kustom saya. Jika saya menggunakan {{ form }}, itu adalah mencetak seluruh formulir. Tetapi jika saya menggunakan bidang tertentu seperti {{ form.my_field }}, tidak ada yang ditampilkan. Adakah yang tahu bagaimana kami bisa menampilkan setiap bidang formulir bundel entitas kustom?

— kalidasan

@kalidasan mencoba mencetak setiap bidang tanpa mencetak {{ form }}. Saya menyarankan setelah mencetak {{ form }}semua elemen formulir akan ditandai sebagai '#rendered' => TRUEdan tidak akan diberikan segera. Jika Anda tidak ingin menggunakan metode bentuk tema ini, Anda harus mencetak setiap bidang satu per satu. Tidak ada drupal_render_children()dalam Drupal 8, kecuali Anda menulisnya sendiri. Bagaimanapun secara default ini akan menyebabkan duplikat, jadi cobalah untuk mencetak setiap bidang secara manual.

— Niklan

@Niklan: Saya belum pernah pakai {{ form }} & {{ form.my_field }}bersama. Pertama dicoba dengan saja {{ form }}, di sini saya bisa melihat seluruh formulir. Kemudian dihapus {{ form }}dari template kemudian mencoba untuk masing-masing bidang formulir secara terpisah seperti ini {{ form.my_field }}, etc , tetapi tidak mengeluarkan apa pun. Tidak ada yang ditampilkan.

— kalidasan

@kalidasan Anda dapat menghapus judul di template_preprocess_FORM_ID_THEME(&$variables). Dalam preprocess ini Anda bisa menambahkan variabel baru, mengubah elemen form yang sudah ada. Saya tidak pernah melihat ini {{ form.field_name.widget }}dan saya sering bertemakan bentuk. Sepertinya bidang ini dibuat khusus atau ditambahkan oleh modul pihak ketiga? Saya pikir ini diperbolehkan, tetapi tidak berlaku untuk orang lain. Saya sarankan Anda untuk memulai dengan hook preprocess dan lihat saja $variables['form']apa yang ada di dalamnya.

— Niklan