This tutorial is part of the “Build a Blog in Drupal 8” series:
In the last tutorial, we added a few menus to flesh out the site navigation. Let’s now build on this by creating a few contact forms.
In Drupal 7, the Contact module is used to create basic contact forms. When a user fills them out, an email is sent to configured email addresses.
One limitation in Drupal 7 is you can’t modify the fields on the form. You can create different categories but the form stays the same.
In Drupal 8, things have changed. Instead of having a single form, you can now create different contact form types. Following in good old Drupal tradition, these contact form types are fieldable. This means you can add any custom field to them and this let’s you create proper, albeit basic forms.
So in this tutorial, we’ll create a custom contact form called “Drupal question”. This form will be similar to the standard contact form but we’ll add an extra field called “Drupal version”. This will let the user select a version of Drupal from a drop-down list.
Let’s jump right in.
Standard Contact Form
A default form called “Website feedback” is created when you install Drupal using the Standard installation profile. This form is used as the basic site-wide contact form and a link is displayed in the footer.
When the form is filled out an email is sent to a designated email address.
Custom Contact Form
As mentioned in the introduction, contact forms in Drupal 8 are now fieldable. This is great because you can create custom forms directly in core without installing extra modules.
Let’s create our “Drupal question” form.
1. Go to Structure, “Contact forms” and click on “Add contact form”.
2. Enter “Drupal question” into Label and enter in an email address into Recipients.
Once the form has been filled out, scroll to the bottom and click on Save.
3. You should’ve been redirected back to the “Contact forms” page. Now click on “Drupal question” to see the form.
You’ll notice that the form already has a few default fields.
Each contact form will have the following:
- Sender name
- Sender email
- Send copy to sender
Even though these are the default fields, you can disable them from the “Manage form display” page so they won’t be shown.
Add Field to Custom Contact Form
In Drupal 8, contact forms are fieldable. So let’s add a drop-down list which let’s users select a Drupal version.
Adding fields to the contact form is the same as adding one to a content type or block type. If you know how to add fields to them, you’ll know how to add them to contact forms.
1. Go to Structure, “Contact forms” and click on “Manage fields” from the Edit drop-down.
2. Click on “Add field”, then select “List (text)” from “Add a new field” and add “Drupal version” to the Label field.
Then click on “Save and continue”.
3. Enter in the following values into “Allowed values list”. Then click on “Save field settings”.
drupal-8|Drupal 8 drupal-7|Drupal 7
4. Finally, let’s make the field mandatory by checking “Required field”, then click “Save settings”.
Configure Field Widgets
New in Drupal 8 is the separation between the field and its widget. I discuss the difference between fields and widgets in part one: “Build a Blog in Drupal 8: Content types and Fields“
Let’s now configure the field widgets which’ll be displayed on the form.
1. Click on the “Manage form display” tab.
2. Move “Drupal version” to the top, then disable “Subject” and “Send copy to sender”. You can disable them by dragging them into the “Disabled” area.
Once complete the page should look like the image below:
Don’t forget to click on Save.
Now go to the form by going to “/contact/drupal_question” and you should see the “Drupal version” drop-down list at the top.
If you’re logged in, the “Your name” and “Your email address” will be pre-populated.
If you view the form as an anonymous user then you’ll see the full form.
Site-wide Contact Form
Each form comes with its own unique URL. This URL is “/contact/[machine_name]”, or in our case it’s “/contact/drupal_question”.
Another thing you can do is configure a site-wide contact form. This form will be accessible via the general URL “/contact”. If you now go to “/contact” you’ll see the “Website feedback” form, this is the default functionality but it can be changed.
Let’s now point it to our “Drupal question” form.
1. Go to Structure, “Contact forms” and click on Edit in the “Drupal question” row.
2. Check “Make this the default form” then click on Save.
3. Now if you go to “/contact” you’ll see the form we created.
The Contact module in Drupal 8 and all other versions sent the submission as an email. It never stored it in the database.
However, in Drupal 8 there’s a module called Contact Storage which stores the submissions in the database.
Configuring it is fairly simple. Just enable it and you’re good to go. All submissions will then be stored in the database.
Submissions can be viewed by going to Structure, “Contact forms” and click on the List tab.
Dealing with Spam
If you’re allowing anonymous users to submit contact forms then make sure you implement countermeasures to handle spam.
The Contact module in Drupal 8 is more powerful than any other version of Drupal. You can do a lot out-of-the-box because forms are now fieldable. But will it replace Webform or eForm (Entityform for Drupal 7)? No it won’t. If a client wants the ability to create survey style forms then Webform is still the number one choice. But if all you require is a basic contact form then look at using the Contact module.