Contact forms in Drupal 8 have taken some of the characteristics of previously used contributed modules such as WebForm and placed the most common functionality into core. This new core feature allows us to create any type of form needed for users to be able to contact us. We can see the basic implementation of a contact form by navigating to /contact within our site.
By default, Drupal creates a contact form that contains fields for name, e-mail, subject, and message. As part of the database snapshot, we have a contact page already created for us. However, we can easily add additional fields and manage the display and format of fields just like we can with content types.
To get a better understanding of how contact forms work, we can navigate to the Contact forms admin by entering /admin/structure/contact within our browser.
We can see that two forms have already been configured:
Contact forms can be managed similar to how we work with content types and blocks. Contact forms are also fieldable and can have additional fields added to them to capture a variety of information. We can get a closer look at how our form can be configured by clicking on the Edit button to the right of the Contact Us form.
The Edit screen consists of several fields vital to a working contact form:
- A Label that identifies which form we are creating
- Recipients, which contains a required list of e-mail addresses that we would like the web form and its content to be sent to
- Auto-reply, which contains an optional message that we want to send users after they have submitted the form
- The Weight field, used to simply sort multiple forms on the contact form's admin page
- The Make this the default form checkbox, which designates which form to use as the default contact form
One thing to note is that the default Website feedback form has been renamed to Contact Us using the Label field. If for some reason the database snapshot has not been imported at this time, you will see the default form instead.
Whenever we create a new contact form, the machine name provided by the Label field is used to generate the predefined URL of /contact/machine-name. In the case of our Contact Us form, we were able to navigate to the form by entering /contact or /contact/feedback. Keep in mind that we cannot modify the machine name once we have entered a label and saved the form.
Our Contact Us form is not using any additional fields. However, if we wanted to add any, the functionality is identical to how fields are added to content types or blocks using the Field UI.
Any time we create a new contact form, there are five fields that are created by default that Drupal requires to handle functionality behind the scenes. Those five fields can be seen on the Manage form display screen.
All contact forms consist of the following fields:
- Sender name—an input to collect the user's name
- Sender email—an input to collect the user's e-mail
- Subject—an input for the subject line of the form
- Message—a text area to collect the message or content of the form
- Send copy to sender—a checkbox to allow the user to receive a copy of the submitted form
For our contact form, we have chosen to disable the Send copy to sender control. This means that when a user submits the form, they will not receive a copy of their submission.
As we can see from the Manage form display screen, we have all the flexibility to enable, disable, and format our fields as needed.
Now that we have a better understanding of contact forms, let's navigate back to our default contact page located at /contact and discuss how we will begin to lay out the remaining components.