Today we will see how to do Email HTML Template add in Contact Form 7.
When we keep the inquiry form in our website, then we add HTML template to make the inquiry generated in the mail box look more attractive.
There are two ways you can add a mail Template to a Contact Form 7.
1.Custom Design
2.From Plugin
Table of Contents
How To Add Email HTML Template With Plugin
Step1: Install Contact Form 7 Email Add on Plugin
Install Contact Form 7 Email Add on Plugin and activate this plugin
Contact Form 7 Email Add on Plugin Provides WordPress Official Site You Can Also Download It From Here
Step2: Edit your Contact Form then click edit Template
Step3: Select One Template
Step4: Add input field name to your message body HTML Template
[name] [email] [Subject] [message] Add it where you want to see?
How To Add Email HTML Template Without Plugin
how to add email html template without plugin then copy the code of html template given below and put it in your message body and do a little customization.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>MYPROGRAMING</title>
</head>
<body style="margin: 0; padding: 0">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-image: url(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/https://www.myprograming.com/wp-content/uploads/2022/09/table-bg.jpg); background-repeat: repeat-x; background-color: #ffffff; padding-top: 20px;">
<tr>
<td align="center">
<div style="width: 100%; max-width: 650px; margin: 0 auto;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 650px; margin: 0 auto;">
<tbody>
<tr>
<td>
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 620px; margin: 0 auto; background: #ffffff;">
<tbody>
<tr>
<td style="background-color: #ffffff;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding-top: 20px; padding-bottom: 20px;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://www.myprograming.com" target="_blank" style="display: inline-block;"><img src="https://www.myprograming.com/wp-content/uploads/2021/07/myprograming-logo.png" alt=""></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #f9f9f9; color: #000000;" height="300">
<div style="color: #1ca1ec; font-size: 30px; text-align: center; font-family: Verdana, sans-serif; font-weight: bold; margin-bottom: 20px;">Congratulations</div>
<div style="color: #000000; font-size: 20px; font-family: Verdana, sans-serif; text-align: center;">
You have a new inquiry from your website
</div>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border: 4px solid #f9f9f9;">
<tbody>
<tr>
<td width="600" style="padding-top: 70px; padding-bottom: 40px; padding-left: 70px; padding-right: 70px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="font-family: Verdana, sans-serif; color: #000000; text-align: left; padding-bottom: 15px;">
<label style="font-weight: bold; display: block; margin-bottom: 10px;">Name</label>
<div style="margin-bottom: 15px;">[your-name]</div>
<div style="border-bottom: 2px solid #f4f4f4;"></div>
</td>
</tr>
<tr>
<td style="font-family: Verdana, sans-serif; color: #000000; text-align: left; padding-bottom: 15px;">
<label style="font-weight: bold; display: block; margin-bottom: 10px;">Email</label>
<div style="margin-bottom: 15px;">
<a href="mailto:[your-email]" style="color: #000000;">[your-email]</a>
</div>
<div style="border-bottom: 2px solid #f4f4f4;"></div>
</td>
</tr>
<tr>
<td style="font-family: Verdana, sans-serif; color: #000000; text-align: left; padding-bottom: 15px;">
<label style="font-weight: bold; display: block; margin-bottom: 10px;">Subject</label>
<div style="margin-bottom: 15px;">[your-subject]</div>
<div style="border-bottom: 2px solid #f4f4f4;"></div>
</td>
</tr>
<tr>
<td style="font-family: Verdana, sans-serif; color: #000000; text-align: left; padding-bottom: 15px; line-height: 25px;">
<label style="font-weight: bold; display: block; margin-bottom: 10px;">Message</label>
<div>[your-message]</div>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="text-align: center;">
<a href="https://www.facebook.com/Myprograming1" target="_blank" style="display: inline-block; margin-right: 3px;"><img src="https://www.myprograming.com/wp-content/uploads/2022/09/facebook-icon.png"></a>
<a href="https://twitter.com/my_programing" target="_blank" style="display: inline-block; margin-left: 3px; margin-right: 3px;"><img src="https://www.myprograming.com/wp-content/uploads/2022/09/twitter-icon.png"></a>
<a href="https://www.instagram.com/myprograming/" target="_blank" style="display: inline-block; margin-left: 3px; margin-right: 3px;"><img src="https://www.myprograming.com/wp-content/uploads/2022/09/instagram-icon.png"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%; max-width: 620px; margin: 0 auto;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="">
<tr>
<td style="font-family: Verdana, sans-serif; font-weight: normal; font-size: 14px; line-height: 24px; color: #3e3e3e; text-align: left; padding-bottom: 30px; padding-top: 15px;">
Copyright © 2022 <a href="https://www.myprograming.com/" target="_blank" style="text-decoration: none; color: #1a1f8e">MYPROGRAMING</a>
</td>
<td style="font-family: Verdana, sans-serif; font-weight: normal; font-size: 14px; line-height: 24px; color: #3e3e3e; text-align: right; padding-bottom: 30px; padding-top: 15px;">
Powered by <a href="https://www.myprograming.com/" target="_blank" style="text-decoration: none; color: #1a1f8e;">MYPROGRAMING</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>Output:
How to Add Cc and Bcc to a Contact Form 7 form
Adding Cc or Bcc headers to your email use the Additional Headers field,
example:
