In this short tutorial, I’ll show you a straightforward approach for customizing the email template sent from WordPress Contact Form 7 (CF7) plugin, making the emails it sends more readable.
The Form Structure
Let’s assume that we have a form that consists of three input elements, a textarea element, and a submit button.
Here’s a possible implementation:
1 |
<div>
|
2 |
<label for="your-name">Name*</label> |
3 |
[text* your-name id:your-name] |
4 |
</div>
|
5 |
|
6 |
<div>
|
7 |
<label for="your-email">Email*</label> |
8 |
[email* your-email id:your-email] |
9 |
</div>
|
10 |
|
11 |
<div>
|
12 |
<label for="your-subject">Subject*</label> |
13 |
[text* your-subject id:your-subject] |
14 |
</div>
|
15 |
|
16 |
<div>
|
17 |
<label for="your-message">Message</label> |
18 |
[textarea your-message id:your-message] |
19 |
</div>
|
20 |
|
21 |
<div>
|
22 |
[submit "SEND"] |
23 |
</div>
|
A Basic Email Template
Through the Mail tab, we set the email template that the recipient will receive upon successful form submission:
For our form, let’s say that we have the following basic template which includes only plain text and CF7’s shortcodes:
This means that the recipient will receive in their inbox emails that look like this:
This is totally fine and will work for most cases as the information is what matters and not the email design.
An Enhanced Email Template
Wouldn’t it be even nicer if the information received by the recipient was more readable and organized? Well, we can achieve this by replacing the previous message body with another one that uses a few structured HTML elements like table. As a necessary condition, we have to select the Use HTML content type checkbox as shown below:
Here’s the updated message body:
1 |
<h2>General Contact Form</h2> |
2 |
|
3 |
<table role="presentation" style="width: 600px; border-collapse: collapse;"> |
4 |
<tbody> |
5 |
<tr> |
6 |
<th style="padding: 16px 12px;">Name</th> |
7 |
<td style="padding: 16px 12px;">[your-name]</td> |
8 |
</tr> |
9 |
<tr style="background: #edf2f4;"> |
10 |
<th style="padding: 16px 12px;">Email</th> |
11 |
<td style="padding: 16px 12px;">[your-email]</td> |
12 |
</tr> |
13 |
<tr> |
14 |
<th style="padding: 16px 12px;">Subject</th> |
15 |
<td style="padding: 16px 12px;">[your-subject]</td> |
16 |
</tr> |
17 |
<tr style="background: #edf2f4;"> |
18 |
<th style="padding: 16px 12px;">Message</th> |
19 |
<td style="padding: 16px 12px;">[your-message]</td> |
20 |
</tr> |
21 |
</tbody> |
22 |
</table> |
As you can see from the code above, for generating the email template we used inline styles and not some of the common table attributes that are now considered deprecated. Still, with these attributes in place, our layout will look the same according to my tests in two major email clients (see screenshots below). This makes sense given the fact that email development is still based on old-school HTML and doesn’t provide stable support for new CSS features.
With this modification, the recipient will receive the previous message in a tabular format. It’s worth noting that its appearance will slightly differ depending on the target email platform.
So, for instance, Outlook will show it like this:
Whereas Gmail will give it the following appearance:
Obviously, more changes might be needed depending on the email layout you want to build. As a rule of thumb, remember to test the final email yourself across different email clients or at least the recipient’s (client’s) email client to ensure that they won’t have any problems accessing the collected data. As you probably know, implementing HTML email templates is a tricky and touchy process.
Conclusion
In this quick tip, we went through a simple technique for creating more structured and attractive email templates for Contact Form 7. I hope you found this approach interesting enough, and you will try it on WordPress sites that take advantage of this form plugin.
Lastly, don’t forget to look at other Contact Form 7 customizations here at Tuts+. As always, thanks a lot for reading!
