Drupal Webform Email Templates
The default email template for the Drupal Webform module will send out the date the form was submitted, the name of the person submitting the form (if they were logged in to the site) or their IP address, the value of each field in the form submission and a URL to a page on the site where the form submission can be viewed or edited. This information is usually sufficient, but you might want to have different fields sent to different people when the form is submitted, or provide a custom message to the person who submitted the form.
To do this, you need to use the Custom Template feature which we will describe.
A Sample Form
For this documentation, we'll use the Web Feedback Form as an example. The form has three fields: a textfield to collect a URL, a textarea to collect comments about the URL and an email field to collect the email address of the person submitting the form. In order to send an email to the person submitting the form, you need to use an email field rather than a text field. The email field will check to see if its value looks like a valid email address and warn the user if it is not.
This is how the form appears to the user:
This is how the Form Components screen appears to an editor:
By clicking on the Edit link to the right of one of the form components you can see the Label and the Field Key. The Field Key will be important when we are setting up the email template. It is a good idea to write down the Label and Field Key for each of your form components on a piece of scrap paper for reference as you create the email template.
This is how the Label and Field Key appear on the Form Component editing form:
Here are the Label and Field Key values for our sample webform.
Adding an Email to the Form
For this example, we will add an email to the Web Feedback Form that sends a confirmation message to the person who submitted the form. To do this, first navigate to the form page and then follow these steps:
- Click the Edit link below the form.
- Click the E-mails link in the Edit Console.
- Click the radio button next to Component value and select the field on your form that collects the user's email. In our example this is the "Your Email" field.
- Click the Add button.
- In the E-mail subject area click the Custom radio button and enter the subject of the email that you would like to send to the user.
- In the E-mail from address area click the Custom radio button and enter your email address or the email address for your department.
- In the E-mail from name area click the Custom radio button and enter your name or the name of your department.
- In the E-mail template area select Custom template from the drop-down menu.
- In the E-mail template area enter the HTML text for your custom email. (see below)
- Optionally, check the Include files as attachments checkbox.
- Click the Save e-mail settings button.
The HTML E-mail
Custom emails are sent using HTML, which is the Hypertext Markup Language. While there are a lot of features of this markup, you don't need to know all of them. Here are examples of some common things you might want to do in your email.
<p>First Paragraph</p><p>Second Paragraph</p>
First Line<br />Second Line after Line Break
Second Line after Line Break
Regular Text, <b>Bold Text</b>
|Regular Text, Bold Text|
Regular Text, <i>Text in Italics</i>
|Regular Text, Text in Italics|
Regular Text, <u>Underlined Text</u>
|Regular Text, Underlined Text|
<a href="http://www.middlebury.edu">Link to Middlebury</a>
|Link to Middlebury|
<ol><li>First List Item</li><li>Second List Item</li></ol>
<ul><li>First List Item</li><li>Second List Item</li></ul>
Tokens can be used to replace part of your email template with information from the form submission. In Webforms 4, tokens can be selected from a dropdown list to be added to any custom field, including the E-mail subject field.
To include a token, position your cursor in the desired field. Scroll down the page and click "Browse available tokens", which appears just below the E-mail template Text Area field. Select your desired tokens. For fields that you've created, you will have to enter that manually to replace a "?" in the token.
|[current-user:name]||The name of the user if logged in. Blank for anonymous users.|
|[current-user:mail]||The e-mail address of the user account. Blank for anonymous users.|
|[current-user:ip-address]||The IP address of the user. An IP address is like the address of a computer on a network. IP addresses beginning with 140.233 are from computers on the Middlebury network.|
|[site:name]||The name of the site (i.e. Middlebury)|
|[current-date:short]||The current date, in 'short' format. (07/30/2015 - 09:45)|
|[current-date:custom:?]||The current date in a custom format. See the PHP documentation for details.|
|[node:nid]||The node ID of the webform. Useful if you need to create a link back to the form.|
|[submission:sid]||The unique submission ID.|
|[node:title]||The title of the webform.|
|[submission:url]||The URL for viewing the completed submission.|
|[submission:values:?]||Webform tokens from submitted data. Replace the "?" with the "field key", including any parent field keys separated by colons. You can append:
We will focus on this last token, since it provides the most flexibility for formatting your custom email template. The ? in each is the value of the Field Key that we found when creating our sample webform. Using the [submission:values:?] token, we can create a custom email as follows:
<p>Thanks, for your feedback on our site at [site:url]!</p> <p>We received the following comments from you, but we're always happy to hear more.</p> <p>[submission:values:comments:withlabel]</p>
Which will appear in the email like this:
Thanks for your feedback on our site at http://www.middlebury.edu!
We received the following comments from you, but we're always happy to hear more.
This is a great website!
Note the appended :withlabel value. With [submission:values:comments], only the value of the field appears in the email. With the appended :withlabel both the value of the field and the Label appear in the email.
Though we don't use them in our example, you may have used the fieldset form component on your webform. Fieldsets also have Field Keys. To include the value of a form field that is inside a fieldset, you need to know both the Field Key of the fieldset and the form field. Let's say that our site_url field in the example was inside a fieldset which had a Field Key of site_information. The %email and %value tokens for this field would be:
Custom Email Subjects
You can also use tokens in the subject line of the email. For instance, entering this in the Custom field under E-mail subject
Web Feedback for %value[site_url]
will send an email with this subject line
Web Feedback for http://www.middlebury.edu