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
- 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.
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.
- Give the webform a proper name.
- Click Save.
- Click the Add element button to add the desired elements.
- Click Add Element next to the Text field option.
- Give it the label of Name.
- Scroll down and click Save.
- Repeat the process, add an email element.
- Click Save.
- Your screen should look like this:
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.
- Give this checkbox the NE title.
- Scroll down.
- Click Save.
- Repeat the process with the other three checkboxes.
- Click Add element once again.
- Select Fieldset under the CONTAINERS section.
- Give it a proper title.
- Scroll down.
- Click Save.
- Rearrange the checkbox elements, so that they’re contained inside the fieldset (notice the “indentation”).
- Click Save elements.
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.
- 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.
- 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.
- Click the Conditions tab.
- Build the condition for this email.
- Click Save.
- You should now see how the system added the email with its corresponding condition.
- You have to create 3 more emails now to cover all the checkboxes.
- When you’re done, click Save handler.
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.
- Click Reports > Recent log messages. You should see the sent emails to their corresponding recipients.
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.
- Getting Started With Drupal’s Webform Module
- Use Case: How to Create a Request Form in Drupal 7
- How to Make an Advanced Webform in Drupal 8
- How to Build Conditional Webforms in Drupal 7
- How to Validate Field Submissions in Drupal
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.
Most of the modules supporting drupal 7 version only , drupal version 8 supported modules under development only.
at the time, there are 1743 modules with a supported stable release for Drupal 8. Unfortunately, there are still some important modules that have to be fully ported, some of them are on their way. For example the Rules module.
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?
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.
I’m no lawyer and I don’t live in Europe either, so I’m not sure at all if this educational content would be/could be useful in Europe.
On the other side, I’m almost sure that people have to give their acceptance by clicking a link on a site banner, which is not webform related.
You can use another Drupal module for that (luckily) – check it out here: https://www.ostraining.com/blog/drupal/display-cookie-compliance-banner/
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
Once again, I’m no lawyer so maybe I’m not understanding right this information
https://www.privacypolicies.com/blog/gdpr-consent-examples/#when-is-consent-required. Big companies with high fine risks will pay a lawyer team for that.
I don’t think the tutorial needs any additional improvements.
Here’s another useful link: https://ramsalt.com/news/annoy-only-eu-citizens-gdpr-cookie-banner
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?