Using Webform as a Contact Form

This is the longest installment of the series, and covers how to setup a contact form using Webform, so that you can include as many or few fields as you like. We'll start out by replicating the functionality of the built-in contact form, then set email templates that can be crafted specifically for the recipient. From there you'll be able to craft your own contact forms, and collect whatever data you want.

A common use of the Webform module is as a contact form. While Drupal does come with a contact form built in, there is very little customization that can be done as to what information is collected. Using the Webform module, we can completely customize what data we collect with our contact form.

Features of the built-in contact form

Before we create our own custom contact form, let's take a look at the default contact form that comes with Drupal by enabling the core "Contact" module.

The form collects:
- A name
- Email address
- Subject
- Message

One thing that is not immediately obvious is that we can create additional categories, and send the results to different email addresses based on the selected category.

To do this, go to "Structure => Contact form"
Click "Add category"
- Category: Human Resources
- Recipients: hr@modulesunraveled.com, brian@modulesunraveled.com

Now when we go back to the contact form we can choose whether we're contacting about "Website feedback" or "Human Resources". I'm going to add a link to the contact form in the main menu so that we can reference back to it easily.

Go to "Structure => Menus => Main menu => Add link"
Menu link title: Contact
Path: contact

Create a new contact form using Webform

Go to "Add content => Webform"
Title: Contact Us
Provide Menu Link: Contact Us
URL alias: contact-us
Comments: Closed
Publishing options: Not promoted to front page
(Save)

Name

Type: Text Field
Title: Name
Default value: [current-user:name] (You can get this by disabling the "Form Builder Webform UI" module)
√ Required

Email

Type: E-mail
Title: Email
Default value: [current-user:mail] (Again, disable the "Form Builder Webform UI" module to get this)
√ Required

Subject

Type: Text Field
Title: Subject

Message

Type: Textarea
Title: Message
√ Required

Click the "View" tab to see our new contact form. Let's fill out the form to see what we get. (You'll notice the name and email fields are already filled out because I'm logged-in.)

Ok, now we can go back to the form, and click the "Results" tab to see our submission.

Receive an email when someone submits the form

If we click the "Webform" tab, we can click on the "E-mails" sub-tab. Here it says that we are "Currently not sending e-mails" So let's add one below.

Address: brian@modulesunraveled.com
(Add)
- E-mail to address: We can enter a custom email address (or addresses, separated by commas) into the "Custom" field, or we can choose a component of the form itself. (We'll talk about the use components in just a minute. For now, I'll add another address, "sales@modulesunraveled.com".
E-mail header details
- E-mail subject: You can use the default, write a custom subject, or again, use a component of the submitted form. I'm going to use "Component: Subject". This will use the subject they enter as the subject of the email.
- E-mail from address: you can change the address from which the email is sent. In this case it makes sense to change this to "Component: Email". This means that when I receive a contact email, it will appear as though it has been sent from the person who filled out the form. This means that I'll be able to hit reply, and write directly back to them.
- E-mail from name: I'm going to change the from name to "Component: Name". In this case we can use any textfield, so we have the ability to use the name the user has supplied.
E-mail template
- Finally, we have the actual message contents. The "Default template" includes the date and time of submission, the user name of the user that submitted the form (if the user was logged in, otherwise it will say "Anonymous"), then the actual submission content, followed by a link to view the form on the site.
- Just below this box we can see our available "Token Values". Most of these are generic site variables, but the very last item "Submission" contains tokens related to webform submissions. And inside that, we can see where the variables "[submission:date]" and "[submission:user]" came from. If we wanted to use a specific date format, we could use one of the variations here. We also see a few other variables we can enter, such as the "[submission:user:picture]", which would include the user picture. I'm going to go ahead and add "IP address: [submission:ip-address]", because this can be useful for blocking the ip-address of spammers, in case that happens.
- And finally, we come to the "Included e-mail values". Anything selected will be included by the "[submission:values]" variable in our template. I'll leave this alone for now, but I'm going to come right back and exclude some components in just a minute.
(Save e-mail settings)

Testing the email functionality

Now, I'll fill it out again as an anonymous user to test our new settings

Name: Jeremy Johnson
Email: jj@example.com
Category: Human Resources
Subject: A fancy subject
Message: This is the message. Awesome!

Now, when we check our email, we have the new submission. With the name and email address in the from field, the subject in the subject line, the submitted date and time, who submitted the form, the form values, a link to view the submission on the site, and the IP address of the user who submitted the form. And if we hit reply, we see that it is going to reply to Jeremy's email address.

Adding additional email addresses

Now, we can add additional addresses we'd like to be notified when the form is submitted. Let's ad "hr@example.com"

Address: hr@modulesunraveled.com
(Add)
E-mail subject: HR Inquiry
E-mail from address: Component: Email
E-mail from name: Component: Name
E-mail template:
- The following HR Inquiry has been received:
  [submission:values]
  The results of this submission may be viewed at:
  [submission:url]
I'm not going to include the IP address, and I'm even going to remove Name, Email and Subject from the "Included e-mail values". This would probably be something that I would do for the other email settings as well, since all three of these are included in the from name and subject line anyway.
(Save e-mail settings)

Ok, so now we have the form sending two different emails. Now this is great, but there's one problem with this particular setup. If a user submits the form and chooses the "Sales" category, our HR person will receive the submission with "HR Inquiry" in the subject line. That doesn't make any sense. So lets change this to only send our HR person an email when the selected category is "Human Resources".

Send to different email addresses based on "Category"

In the default contact form, we have the ability to send the form submission to different people based on the category chosen. Let's add that same ability to our Webform based contact form. (Before I start though, I want to point out that using this method exposes the email address in the raw html. This means that it is possible for spam bots to pick these up. Keep that in mind, when you decide whether or not to use this technique.)

Set the email addresses as the key values

The first step is to actually alter the form component "Categories".

So we'll go back to the "Webform" tab, and click on "Form components".
Then next to "Category" choose "Edit".
Scroll down to the "Options" field, and change the key value (the first one) to the email address that corresponds to the category. (One thing to note here is that you can set multiple email addresses by separating them with a comma. ie: brian@modulesunraveled.com,hr@modulesunraveled.com|Human Resources.)
- brian@modulesunraveled.com|General
- brian@modulesunarveled.com,hr@modulesunraveled.com|Human Resources
- sales@modulesunraveled.com|Sales
- marketing@modulesurnraveled.com|Marketing
(Save component)

p>(One thing to note is that if you're not using the Form Builder module, and there are multiple emails as the key, the default must be the exact key (in our example above, we would use "brian@modulesunarveled.com,hr@modulesunraveled.com" to make "Human Resources" the default option.)

Now if we submit the form, and choose the "Human Resources" category, you'll see that both brian@modulesunraveled.com and hr@modulesunraveled.com get emails about the form submission. And if we submit it and choose "Sales" as the category, only sales@modulesunraveled.com gets the message.

Previous

Next