Temi un modulo di contatto

Vorrei creare un tema di un modulo di contatto in Drupal 8. Vorrei mettere i div attorno agli elementi del modulo (usando bootstrap).

Voglio anche mettere alcune classi su alcuni elementi (pulsante di invio, il modulo stesso).

Apri il tuo file YOURTHEMENAME.theme e aggiungi il seguente codice:

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

}

Ed ecco il tuo risultato:

Non dimenticare di svuotare la cache;)

Puoi semplicemente tema ogni forma come vuoi. Non mi piace il metodo di @rpayanm, perché è difficile da leggere e difficile da leggere, con forme grandi non è così, solo involucro singolo e struttura semplice.

Ogni modulo che tenta di utilizzare il tema è uguale al nome della macchina. Puoi trovare questo nome di modello $form['#theme']solo per alterazione, è sempre (o nella maggior parte dei casi) lo stesso del nome macchina dell'ID modulo. Quello che devi fare è registrare un modello per questo. Devi implementare hook_theme(). Puoi scriverlo in CUSTOMMODULE.module o in THEMENAME.theme. La chiave del tema deve essere la stessa di in $form['#theme'], quindi la utilizza automaticamente, altrimenti è necessario aggiungerne una nuova tramite la modifica del modulo.

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

Drupal passa $ form variabile con form.

Quindi è necessario creare custom-form-template-name.html.twig(con il nome del modello da hook_theme ()).

Il modello minimo è

{{ form }}

Puoi anche stampare tutti i campi dal modulo dove desideri

{{ form.field_name }}

Qui puoi fare quello che vuoi con il markup.

È inoltre possibile passare ulteriori dati al modello implementando template_preprocess_TEMPALTENAME

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

E quindi utilizzare nel modello

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

Penso che questo metodo sia più flessibile, pulito e potente.

Ps mi dispiace per il mio inglese, spera che qualcuno modifichi e ripari i miei errori :)

Esempio di forma complessa usando questo metodo.