Tema un formulario de contacto

Me gustaría crear un tema para un formulario de contacto en Drupal 8. Me gustaría poner divs alrededor de los elementos del formulario (usando bootstrap).

También quiero poner algunas clases en ciertos elementos (botón de enviar, el formulario en sí).

Abra su archivo YOURTHEMENAME.theme y agregue el siguiente código:

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

}

Y aquí está tu resultado:

No olvides limpiar tus cachés;)

Simplemente puede tema cada forma como desee. No me gusta el método de @rpayanm, porque es difícil de mantener y fácil de leer, con formas grandes, este no es el caso, solo un contenedor y una estructura simple.

Cada formulario que intenta usar el tema es igual al nombre de su máquina. Puede encontrar este nombre de plantilla $form['#theme']simplemente alterando, siempre es (o en la mayoría de las veces) igual que el nombre de la máquina de identificación de formulario. Lo que debe hacer es registrar la plantilla para ello. Necesitas implementar hook_theme(). Puede escribirlo en CUSTOMMODULE.module o en THEMENAME.theme. La clave del tema debe ser la misma que en $form['#theme'], por lo que se usa automáticamente, de lo contrario, debe agregar una nueva a través del formulario alter.

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

Drupal pasa $ formulario variable con formulario.

Luego debe crear custom-form-template-name.html.twig(con su nombre de plantilla de hook_theme ()).

La plantilla mínima es

{{ form }}

También puede imprimir cada campo desde el formulario donde desee

{{ form.field_name }}

Aquí puedes hacer lo que quieras con marcado.

También puede pasar datos adicionales a la plantilla implementando template_preprocess_TEMPALTENAME

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

Y luego usar en plantilla

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

Creo que este método es más flexible, limpio y potente.

Lo siento por mi inglés, espero que alguien edite y corrija mis errores :)

Ejemplo de forma compleja usando este método.