Personalizar formulario con plantilla en Drupal 9

Una de las tareas que mas costaba en Drupal 7, era tener que darle estilo o modificar el código HTML de algún formulario en específico. Personalmente, era lo que menos me gustaba en Drupal 7. Drupal 8 ha mejorado muchísimo y ahora es muy sencillo.

Primeros pasos

Para que podamos disponer de una plantilla, tenemos que asignársela, primero tenemos que saber cual es la ID del formulario que vamos a personalizar. A si que vamos a la pagina de nuestro formulario, he inspeccionando el elemento, tendremos que buscar la etiqueta "<form>" y buscar la ID del mismo, por ejemplo para el login podemos ver que la ID es "user-login-form":

Ahora que tenemos la ID, tenemos que alterar el formulario con hook_form_alter() para poder asignarle una plantilla en el atributo #theme, en la ID del formulario, tenemos que cambiar los guiones (-) por lineas bajas (_) como se ve en el ejemplo:

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_alter().
 */
function nireneko_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  switch ($form_id) {
    case 'user_login_form':
      //Altera el formulario para añadirle una plantilla y poder imprimirlo
      $form['#theme'] = 'neko_user_login';
      break;
  }
}

Ya solamente nos queda crear la plantilla para poder imprimir los diferentes campos como queramos.

Personalizar formulario

Ahora que tenemos asignada la plantilla al formulario, solamente nos queda crear la plantilla, la tendremos que llamar neko_user_login.html.twig, lo mas sencillo, es crear la plantilla dentro del tema que estemos desarrollando, si no lo hacemos, deberemos definir la plantilla con hook_theme().

/**
 * Implements hook_theme().
 */
function nireneko_theme($existing, $type, $theme, $path) {
  return [
    'neko_user_login' => [
      'render element' => 'form',
    ],
  ];
}

Dentro de la plantilla, dispondremos de la variable "form", la cual contiene los campos que tenemos en el formulario y podemos imprimirlos fácilmente, por ejemplo para el campo "name" del formulario de login, tenemos que utilizar "form.name". Es importante que imprimamos también el build_id, token, id y "actions", sin estas ultimas no se podría realizar el envío ya que se trata del botón "Submit".

<h3 class="form-title font-green">Iniciar sesión</h3>
<div class="alert alert-danger display-hide">
  <button class="close" data-close="alert"></button>
  <span> Inserta tu usuario y contraseña. </span>
</div>
<div class="form-group">
  {{ form.name }}
  <div class="form-group">
    {{ form.pass }}
    <div class="form-actions">
      {{ form.form_build_id }}
      {{ form.form_token }}
      {{ form.form_id }}
      {{ form.actions }}
    </div>
    <div class="create-account">
      <p>
        <a href="/user/register" id="register-btn" class="uppercase">Registrarse</a>
      </p>
    </div>
  </div>
</div>

Y así podemos personalizar nuestros formularios. Realmente es sencillo, ya que únicamente tenemos que especificar una plantilla, lo ideal seria que pudiéramos utilizar el sistema de debug de Twig con las sugerencias de plantillas, pero de momento no existe esa función.