Styling forms

Drupal uses a set of nested templates to render a form, starting from the template of the single input element (such as textfield or button) up to a form element that wraps together the input element and its label. Every form element is then managed by a template for the specific form ID, and finally, by a template that wraps everything by adding the <form> HTML tag.

Styling generic forms

To style a form we need to overwrite and customize some templates:

1. First, we need to provide a custom template for all the render elements used in the form, and their labels:

   {{ include('@atoms/input.html.twig', {

     attributes: attributes,

     children: children,

   }) }}

This is the template that Drupal will use for every form input; put this code in the templates/form/input.html file of the alps_trips theme.

2. Submit buttons are different from other input elements, and must use a different template:

   {{ include('@atoms/button...