Contact Form 7 Email Templates

Ready to take your Contact Form 7 game to the next level? Say goodbye to bland, boring form emails and welcome the magic of html customisation!

Meet Contact Form 7

Contact Form 7 is a WordPress plugin that puts the power in your hands when it comes to managing those oh-so-vital website forms. Contact Form 7 makes it super easy to create and customise contact forms on your WordPress website. Its user-friendly interface allows you to effortlessly make design adjustments, making it an essential tool for any WordPress website. But there’s a twist! By default, your submitted form contents are pretty basic, plain text or HTML and not very cool. Fear not! We’ve got you.

Introducing our not-so-secret weapon: a Contact Form 7 HTML email template that’s not just functional but downright fabulous! No more scratching your head over customisation – we’ve sprinkled some HTML magic to make your form emails pop with style. These templates integrate with the Contact Form 7 Mail (2) option, offering an avenue for tailored confirmation emails. So your users will start receiving confirmation emails that scream “You’re awesome!”.

Now, before you dive into the HTML wonderland, a quick pit stop in your dashboard is in order. Click on contact > select your form > hit the mail tab > scroll down, and boom – select “Use HTML content type.” Easy peasy!

Let’s install Contact Form 7

Activate Contact Form 7 Plugin

Before delving into the HTML template, ensure your Contact Form 7 email notifications embrace the HTML content type a quick pit stop in your dashboard is in order. Click on contact > select your form > hit the mail tab > scroll down, and select “Use HTML content type.”

Now, behold the Contact Form 7 HTML Email Template Example.

Below are two CF7 designs that you can use as inspiration or straight up use the code. Just edit the image locations for your own and your away 🙂

Design 1: Bamboo Basic Blue

Email Message:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="padding:0; margin:0;">
<table bgcolor="#294F93" style="width:100%!important; height:100%!important; padding:0 0 50px 0; font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight:normal; line-height:1.6; background-image:linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);">
<tr>
<td style="display:block!important; max-width:800px!important; margin:0 auto 0 0!important; clear:both!important;">
<div style="padding:25px; max-width:800px; margin:0 auto; display:block;">
<table style="width: 100%;">
<tr>
<td>
<h1 style="font-weight:900; font-size:66px; line-height:1em; margin:20px 0 50px 0; color:#FFFFFF;">[your-name] Thank you for your enquiry.</h1>
<p style="font-size:26px; color:#FFFFFF;"><strong>[your-name]</strong>, has sent you an enquiry from <strong>[your-email]</strong> about <strong>[your-subject]</strong>.</p>
<p style="font-size:26px; color:#FFFFFF;">[your-message]</p>
<img style="margin-bottom:50px;" src="https://www.bamboomanchester.uk/wp-content/uploads/BambooManchesterLogoWhite.png" width="200px" />
<p style="margin-bottom:10px; padding-top:50px; font-size:14px; color:#FFFFFF; border-top:1px solid #ffffff73;">This e-mail was sent from a contact form on myWebsite.com (https://www.myWebsite.com)</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Preview Message – Click Here

Email Autoreply:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="padding:0; margin:0;">
<table bgcolor="#294F93" style="width:100%!important; height:100%!important; padding:0 0 50px 0; font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight:normal; font-size:100%; line-height:1.6; background-image:linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);">
<tr>
<td style="display:block!important; max-width:800px!important; margin:0 auto 0 0!important; clear:both!important;">
<div style="padding:25px; max-width:800px; margin:0 auto; display:block;">
<table style="width:100%;">
<tr>
<td>
<h1 style="font-weight:900; font-size:66px; line-height:1em; margin:20px 0 50px 0; color:#FFFFFF;">[first-name] Thank you for your enquiry.</h1>
<p style="font-size:26px; color:#FFFFFF;">Hi [first-name],</p>
<p style="font-size:26px; color:#FFFFFF;">Thank you for your enquiry. We strive to address all our enquiries within 24 hours, and we will let you know when your request has been processed.</p>
<p style="font-size:26px; color:#FFFFFF;">If your request is more urgent, please feel free to call our offices: +44 (0)123 456 7890</p>
<p style="font-size:26px; color:#FFFFFF;">Kind Regards</p>
<p style="margin-bottom:50px; font-size:26px; color:#FFFFFF;"><strong>Amazing Contact Form 7 </strong> <br />(automated reply)</p>
<img style="margin-bottom:50px;" src="https://www.bamboomanchester.uk/wp-content/uploads/BambooManchesterLogoWhite.png" width="200px" />
<p style="margin-bottom:10px; padding-top:50px; font-size:14px; color:#FFFFFF; border-top:1px solid #ffffff73;">This e-mail was sent from a contact form on myWebsite.com	(https://www.myWebsite.com)</p>
<p style="font-size:14px; color:#FFFFFF;">MyBusiness Limited is a Company registered in England and Wales under Company Number 12345678.</p>
<p style="font-size:14px; color:#FFFFFF;">This message and any files sent with it are confidential. It may not be disclosed to, or used by anyone other than the addressee(s) without the express consent of the sender. If you receive this message in error, please advise the sender immediately.</p>
<p style="font-size:26px; color:#FFFFFF">Before printing, <strong>think</strong> about the environment.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Preview Autoreply – Click Here

Design 2: Bamboo Business Email

Email Message:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="padding: 0; margin: 0;">
<table bgcolor="#FFFFFF"
	style="background-color:#FFFFFF; 100%!important; height:100%; padding:0 0 50px 0; font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight:normal; font-size: 100%; line-height: 1.6;">
<tr>
<td style="display:block!important; max-width:800px!important; margin:0 auto 0 0!important; clear:both!important;">
<div style="padding:25px; max-width:800px; margin:0 auto; display:block;">
<table style="width: 100%;">
<tr>
<td>
<p style="font-size: 15px; color: #000000;"><strong>[your-name]</strong> has sent you an enquiry about <strong>[your-subject]</strong>.</p>
<p style="font-size:15px; color: #000000;"><strong>Message:</strong> [your-message]</p>
<p style="font-size:15px; color: #000000;"><strong>Email:</strong> [your-email]</p>
<p style="margin-bottom:20px; font-size:15px; color:#000000;"><strong>Name:</strong> [your-name]</p>
<p style="margin-bottom:20px; font-size:15px; color:#000000;"><strong>Amazing Contact Form 7 </strong> <br />(Website Enquiry)</p>
<img style="margin-bottom:20px;" src="https://www.bamboomanchester.uk/wp-content/uploads/bamboo-manchester-logo.gif" width="200px" />
<p style="margin-bottom:10px; font-size:14px; color:#000000; border-top:1px solid #00000073; padding-top:20px;">This is a notification that a contact form was submitted on your website ([_site_title] [_site_url]).</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Preview Message – Click Here

Email Autoreply:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="padding:0; margin:0;">
<table bgcolor="#FFFFFF" style="background-color:#FFFFFF; height:100%; padding:0 0 50px 0; font-family:Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight:normal; line-height:1.6;">
<tr>
<td style="display:block!important; max-width:800px!important; margin:0 auto 0 0!important; clear:both!important;">
<div style="padding:25px; max-width:800px; margin:0 auto; display:block;">
<table style="width:100%;">
<tr>
<td>
<p style="font-size:15px; color:#000000;">Hi [your-name],</p>
<p style="font-size:15px; color:#000000;">Thank you for your enquiry regarding [your-subject]. We strive to address all our enquiries within 24 hours, and we will let you know when your request has been processed.</p>
<p style="font-size:15px; color:#000000;">If your request is more urgent, please feel free to call our offices: +44 (0)123 456 7890</p>
<p style="font-size:15px; color:#000000;">Kind Regards</p>
<p style="margin-bottom:20px; font-size:15px; color:#000000;"><strong>Amazing Contact Form 7 </strong> <br />(automated reply)</p>
<img style="margin-bottom:20px;" src="https://www.bamboomanchester.uk/wp-content/uploads/bamboo-manchester-logo.gif" width="200px" />
<p style="font-size:15px; color: #000000; margin-bottom: 30px;"><span style="display: inline-block;"><strong style="font-size: 13px;">P.</strong> <a href="#" style="color:#000000; text-decoration:none;">+44(0)1234 567 890</a></span> <span>  |  </span> <span style="display:inline-block;"><strong style="font-size:13px;">M.</strong> <a href="#" style="color: #000000; text-decoration: none;">+44(0)7544 000 000</a></span> <span>  |  </span> <span style="display: inline-block;"><strong style="font-size: 13px;">W.</strong> <a href="#" style="color:#000000; text-decoration:none;">www.yourwebsite.com</a></span></p>
<p style="border-top:1px solid #00000073; padding-top:20px;"><img src="https://www.bamboomanchester.uk/wp-content/uploads/accreditations-b.jpg" width="100%" /></p>
<p style="margin-bottom:10px; font-size:14px; color:#000000;">This e-mail was sent from a contact form on myWebsite.com (https://www.myWebsite.com)</p>
<p style="font-size:14px; color:#000000;">MyBusiness Limited is a Company registered	in England and Wales under Company Number 12345678.</p>
<p style="font-size:14px; color:#000000;">This message and any files sent with it are confidential. It may not be disclosed to, or used by, anyone other than the addressee(s) without the express consent of the sender. If you receive this message in error, please advise the sender immediately.</p>
<p style="font-size:16px; color:#000000">Before printing, <strong>think</strong> about the environment.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

Preview Message – Click Here

Replace the placeholders with your specific form fields and, where applicable, incorporate your logo image (recommended minimum width of 200px) or whatever suits your style :). This template not only enhances functionality but also adds a touch of professionalism to your online enquiries.

Copy and paste the provided HTML code into the mail body section within the mail tab of your Contact Form 7 form, and customise it according to your preferences. Achieve a seamless blend of professionalism and style with Contact Form 7 – optimising your WordPress communication effortlessly.