Almost every website provides a mechanism for users to contact the individual, business, or association that owns the site, whether that be in the form of a simple e-mail link or something more advanced using a web form. Often, a contact page is part of the main menu hierarchy, as is evident in our mockup.
In this chapter, we will take a look at creating a contact page that uses the new contact forms that are part of Drupal 8 core. We will not be using any contributed modules, as core provides us with the configuration and templates needed to create most forms. We will also not be covering the extensive Form API, as it is beyond the scope of this module.
However, we will be learning the following theming techniques that will allow us to create a well-structured contact page:
While we work through each section, we have the ability to refer back to the Chapter10
exercise files folder. Each folder contains start
and end
folders with files that we can use to compare our work when needed. This also includes database snapshots that will allow us to all start from the same point when working through various lessons.
Like previous sections of our website, having a mockup to review makes planning how to develop a page much easier. Page structure, blocks, web forms, and other functionality we will need to consider can easily be discovered by looking at the contact page in the Mockup
folder located in our exercise files. Begin by opening up the contact.html
file within the browser.
The contact page mockup has some fairly standard components that most websites seem to use today. Starting at the top of our layout and working our way down, we can identify three different sections that we will need to develop and theme for our Drupal site.
Having identified these three different components, we will focus on the most important and most detailed piece of functionality first—the contact form.