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 book.
However, we will be learning the following theming techniques that will allow us to create a well-structured contact page:
- We will begin with reviewing the mockup of our contact page and identify how specific blocks or fields will need to be presented for display.
- Next, we will take a closer look at contact forms in Drupal and how to modify an existing form that we can use for our contact page.
- As Drupal creates the page that all contact forms utilize, we will make use of alternative regions within our theme to add additional content to our contact page.
- Finally, we will see how simple it is to add a Google map while working some more with libraries and Twig.
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.
- First, we have a Google map displaying the current address using a map marker. We will revisit building this section of the site after we have created our contact form.
- Second, we have a simple block of information or callout telling users how they can get in touch with us.
- The last section is the web form itself and is by far the most important component of the contact page.
Having identified these three different components, we will focus on the most important and most detailed piece of functionality first—the contact form.