How do I create an HTML email template with Contact Form 7?

Contact form 7 is the most developer-friendly WordPress plugin for controlling and managing your WordPress website forms. By default, when you create a new web form, the user-submitted form contents are delivered to you via plainly formatted text or an HTML formatted email.

So, what’s the problem?

Well, Contact Form 7 leaves it up to you to customize your form email output which can be a real pain. I will provide you with a simple Contact Form 7 HTML email template example so you can easily paste it into your form message body and have a crafty, well-formatted, HTML email delivery of your form contents.

This HTML email template can also work using the Contact Form 7 Mail (2) option for branded user-customized confirmation emails.

Contact Form 7 HTML Content Type

Before we dive into the HTML email template code, you want to ensure that you first confirm that your Contact Form 7 email notifications are being delivered using the HTML content type.

When in your WordPress dashboard, click contact > select your form > select the mail tab > then scroll to the bottom and select – Use HTML content type.

Contact Form 7 HTML Email Template Example

Now, as you know, you will need to enter in your own Contact Form 7 form fields that are specific to your form – within this HTML email template, I added place holders for you to replace with your web form fields as [YOURFIELD] – you can remove what is not needed. I also added a header logo; for this image, you will only need to provide the full URL path to your logo image (recommended minimum width of 300px).

With those points covered, copy and paste the below HTML code into your mail body section within the mail tab of your Contact Form 7 form and customize it to your liking.

<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<table bgcolor="#fafafa" style=" width: 100%!important; height: 100%; background-color: #fafafa; padding: 20px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 100%; line-height: 1.6;">
<td bgcolor="#FFFFFF" style="border: 1px solid #eeeeee; background-color: #ffffff; border-radius:5px; display:block!important; max-width:600px!important; margin:0 auto!important; clear:both!important;"><div style="padding:20px; max-width:600px; margin:0 auto; display:block;">
<table style="width: 100%;">
<td><p style="text-align: center; display: block; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #dddddd;"><img src="URLOFYOURLOGO"/></p>
<h1 style="font-weight: 200; font-size: 36px; margin: 20px 0 30px 0; color: #333333;">Details...</h1>
<p style="margin-bottom: 10px; font-weight: normal; font-size:16px; color: #333333;">[YOURFIELD]</p>
<h2 style="font-weight: 200; font-size: 16px; margin: 20px 0; color: #333333;"> [YOURFIELD] </h2>
<h2 style="font-weight: 200; font-size: 16px; margin: 20px 0; color: #333333;"> [YOURFIELD] </h2>
<h2 style="font-weight: 200; font-size: 16px; margin: 20px 0; color: #333333;"> [YOURFIELD] </h2>
<h2 style="font-weight: 200; font-size: 16px; margin: 20px 0; color: #333333;"> [YOURFIELD] </h2>
<p style="text-align: center; display: block; padding-top:20px; font-weight: bold; margin-top:30px; color: #666666; border-top:1px solid #dddddd;">YOUR COMPANY NAME</p></td>

What will this look like when a user completes your form and receives an email?

The above Contact Form 7 HTML email template example will output something like the below reference depending on your specific form contents:




  • The Power of Rate Limiting: Enhancing Website Traffic and Performance

    In the fast-paced digital landscape, where website traffic and user interactions are at an all-time high, ensuring optimal performance and security has become a critical concern for website administrators. One effective technique that can significantly improve both website traffic management and performance is rate limiting. Rate limiting is a method that controls the number of…

  • How do I Remove the “Save my name” Checkbox In WordPress?

    In WordPress, when users leave comments on your blog posts, they are often asked to provide their name, email address, and website. By default, WordPress includes a checkbox labeled “Save my name, email, and website in this browser for the next time I comment.” This checkbox allows users to have their information saved in cookies,…

  • How do you force SSL and fix mixed content with HTACCESS?

    So, you have a shiny new SSL certificate for your website, and now you need to force SSL, but you keep getting mixed content errors. This simple guide will consist of two parts and should get you up and running with a “green lock” in no time. Step 1 — You Need To Modify Your…

  • How do I reset all form fields using pure JavaScript?

    It doesn’t matter why you might want to add a reset form button for your users. It could be that the form has conditional logic, is super long, complex, or that it has form fields that are prone to user error. We will look at a straightforward way to add a form button to reset…

  • How do I create a simple news ticker using HTML and CSS?

    Alright, so you need some text, links, or images to scroll across your website from left to right. Some folks call this a “news ticker”, some call it a “text scroller” — we will stick with news ticker for the sake of keeping our references simple. Sure, you can make this happen with JavaScript but why complicate…

  • How do I make a textarea form field match an input form field?

    Have you ever wondered why the default font for a form textarea field is different when using a placeholder? The default fonts for all web forms are usually determined by the browser used, and technically, it is up to us to define what fonts or styles to display via our CSS. Here is how you…