How to Create a Contact Form in Drupal 8

How to Create a Contact Form in Drupal 8

One of OSTraining’s members asked how to create a following web form with the Webform module:

  • The site has four regions to be contacted: NE, SE, NW, and SW.
  • Each region will have their own contact person/team.
  • The user must be able to select one or more of the regions to contact at the same time, using checkboxes.
  • All the submittions must be BCC-ed to the main administrator.
  • If needed, the site owner should be able to add one or more email recipients for each region.

In this tutorial, you will learn how to meet these user requirements using the Webform module.

The Webfrom module supports conditional emails. You can send an email to a particular email address, based on the value of the webform element.


Step #1. Install the Webform module

  • Type following command in your terminal inside the root directory of your Drupal installation.

composer require drupal/webform

01

  • The webform module has many submodules, for the purpose of this tutorial, you’ll only need to check the Webform and the Webform UI checkboxes.
  • Click Install.

02


Step #2. Create the Form

We are going to create an easy form requesting the user to input their name, email address, the region (or regions) the user can select and a submit button.

  • Click Structure > Webforms > Add webform.

03

  • Give the webform a proper name.
  • Click Save.

04

  • Click the Add element button to add the desired elements.
  • Click Add Element next to the Text field option.

05

  • Give it the label of Name.
  • Scroll down and click Save.

06

  • Repeat the process, add an email element.
  • Click Save.

07

  • Your screen should look like this:

08


Step #3. The checkboxes

We need 4 checkboxes each with one of these regions: NE, SE, NW, SW.

  • Click Add element.
  • Look for the checkbox and click Add element next to it.

09

  • Give this checkbox the NE title.
  • Scroll down.
  • Click Save.

10

  • Repeat the process with the other three checkboxes.

11

  • Click Add element once again.
  • Select Fieldset under the CONTAINERS section.

12

  • Give it a proper title.
  • Scroll down.
  • Click Save.

13

  • Rearrange the checkbox elements, so that they’re contained inside the fieldset (notice the “indentation”).
  • Click Save elements.

14


Step #4. The Conditional Emails

We need now to add the logic to send an email, depending on the checkbox the user checks.

  • Click Structure > Webforms.
  • Next to the form you just created, click the arrow next to the button.
  • Select Settings from the drop-down menu.

15

  • Click the Emails/Handlers tab.
  • Click the Add email button.
  • Give this email a proper title according to the assigned supervisor (depending on the marked checkbox).
  • In the SEND TO area select Custom To email address.
  • Enter the email address for this particular supervisor.

16

  • Do the same with the BCC email. This is the global address which will be getting all the form submission from all the four regions.

17

  • Click the Conditions tab.
  • Build the condition for this email.
  • Click Save.

18

  • You should now see how the system added the email with its corresponding condition.

19

  • You have to create 3 more emails now to cover all the checkboxes.
  • When you’re done, click Save handler.

20


Step #5. Testing the Webform

  • I’m working locally for this tutorial. There’s no problem if I test the webform a couple of times. You have to have a little more caution if you’re on a live server.

21

  • Click Reports > Recent log messages. You should see the sent emails to their corresponding recipients.

22

The webform module allows you to send emails based on conditions related to the value of the form elements in your Drupal site.

This is an easy way to add basic logic to your forms. I hope you enjoyed reading this tutorial. Leave us your comments below.

Additional Reading


What’s Next

Join OSTraining Everything Club now for only $59 (saving of $85) and start learning how to build great websites with Drupal!

You’ll get access to the large library of our Drupal training videos plus the best-selling “Drupal 7 Explained” and “Drupal 8 Explained” books.

Instructor

  • Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Blog Rating
Subscribe
Notify of
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
aanbarasan

Hi brother,
Most of the modules supporting drupal 7 version only , drupal version 8 supported modules under development only.

Justin

Is there a way to do the conditional emails with only 1 email handler? If I have a lot of conditions that could possibly be met, I am having to create a separate email handler for each one. What if in 6 months from now I need to update the wording of the emails that get sent out? I would have to edit so many different handlers. Is there a better way?

Y

A message from Europe: of course, webform based contact form have to be declared as another data processing as it stores user data in a database… To be compliant with [url=https://en.wikipedia.org/wiki/General_Data_Protection_Regulation]GPDR[/url], you have to work a little bit more on the implementation.

Y

Hello Jorge,
Cookie compliance banner ask visitors to accept (or not) some extra cookies (“extra”: other than session cookies – like tracking cookies) and it existed before GPDR.
GPDR make site owners responsible for the data given by visitors/users. And sites owners should store only the minimum data needed to execute one treatment.
As sending a contact mail may be implemented whithout storing data, it should. And Wedform help now for this: isn’t there an option not to store data?
GPDR go really further than this case. See the description of this dedicated module to understand how far this regulation may go: https://www.drupal.org/project/gdpr
Kind regards

Create Contact Form

I’m looking to build my own contact form plugin because the contact forms in the market I’ve tried slow down my site. Is this the best alternative?

10
0
Would love your thoughts, please comment.x
()
x