Styling Forms

One of the most pervasive features of any website is to accept user input through forms. Whether it is the login form or a form to subscribe to a newsletter, making it consistent with the design system of the whole site is mandatory.

In this chapter, we’ll dive into how a form works in Drupal and how to style it.

You’ll learn about render elements and how they are used to provide widgets to be used in a form array.

You’ll also learn which templates to use to style every section and component of a form. We will cover the following topics in this chapter:

• Understanding forms
• Styling forms

Understanding forms

Until now, we’ve dealt with URLs that render, in their main content block, a custom render array (/forecast/turin, for example) or a render array that represents a node (the Home page or the Trip page).

But not all the routes follow this pattern. For example, the /user/login route contains something different. By using WebProfiler, we can see that the controller used in this case is HtmlFormController, which is in charge of returning a specialized version of a render array, called a form array. At the moment, the login form is functional, but it is unstyled:

Figure 7.1 – The unstyled login form

Figure 7.1 shows that the main content for the Log in page is a form.

HtmlFormController is used to manage every form that must be rendered in the main content block, but how does Drupal know which form to render where? A form is identified by two properties:

• The fully qualified class name: \Drupal\user\Form\UserLoginForm...

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

Summary

In this chapter, we saw how Drupal’s Form API works and how to style a form.

You’ve learned what a render element is and how to use it in a form. You then saw all the theme hooks and the templates involved in the styling of a form.

Now, we have all the knowledge required to explore and style the output of one of the most powerful modules of Drupal: the Views module. Chapter 8, Styling Views, will provide you with all the information you need to create beautiful lists of content.