Email style and template for Contact Form 7

by | May 20, 2020 | Website Design

Contact Form 7 HTML Email. 

Here we demonstrate how to style emails for Contact Form 7.

Contact Form 7 email

Styling your emails sent from the customer and to the customer is a great marketing tool. Having a well formatted email is essential, as this will most likely be the first communication with the customer. It also always easy extraction of information for preparing documents, quotes and so on.

Note: Some of the code (HTML, CSS or PHP) within this blog are from other blog posts, forums and may have been modified from other web sources. Always verify the code prior to using it on a live website.

Email format

Two choices for the type of email format:

  • Plain text – Good for simple no no-sense emails with very basic formatting
  • HTML – Great to create an impressive email with formatting to suit your requirements

Data from Contact form 7 fields

Easily add in a form entered details such as the users name, email, message or whatever your form has. These can be used in the email itself including in the following:

  • To email address
  • From email address
  • Subject
  • Additional headers
  • Message body

An example of how to use this would be for the subject: Fat Dog SEO – [customer-name] from [customer-company] requires [fat-dog-seo-service]. Where the blue is a short-code form field and the purple is plain text. A header example may include Reply-To: [customer-email] or similar.

 Find out more about our services

Website & SEO Services Australia

HTML email for Contact Form 7

Ensure that the tick box below the Contact form 7 “message body” is ticked, otherwise, the email won’t appear nice at all!

So we are aiming for an email that looks like the one below. The dotted lines don’t visually appear in the email but do allow copying and pasting of data into a table. This helps significantly if you have a large form and want to transpose the details, without manually doing it. Obviously the fields etc are whatever you want them to be. Also, the image is from open-source (Wikipedia) but can be changed to your company logo or similar.

Contact Form 7 email formatting and styling in HTML

Here is the Contact Form 7 HTML email template

Below is the HTML for the example email template, this should help create your first template. The same principle applies if you want to send a “Mail 2” email such as an auto-response the user to let them know their message was received or an auto-reply.

<table cellpadding="0" cellspacing="0" align="center" width="100%" style="background-color:#f7f7f7; font-family:Arial, Helvetica, sans-serif">
    <tr>
        <td valign="top">
            <table cellpadding="0" cellspacing="0" width="718" align="center" style="background:rgba(0,0,0,0.1);margin-top:20px;">
                <tr>
                    <td width="18"></td>
                    <td width="598" style="background-color:#ffffff; padding:42px" valign="top">
                        <table cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td height="110" align="center" valign="top"><a href="https://www.YOUR-WEBSITE-URL"><img src='https://upload.wikimedia.org/wikipedia/commons/b/b1/Email_Shiny_Icon.svg' /></a></td>
                            </tr>
                            <tr>
                                <td style="background:#9acb51;color:#ffffff; font-size:18px; text-transform:capitalize; font-family:sans-serif; font-weight:bold; padding:10px;">
                                    You got an email from your website!
                                </td>
                            </tr>
                            <tr>
                                <td> </td>
                            </tr>
                            <tr>
                                <td style="color:#999999; font-weight:bold; font-size:16px;">Hey, hello and wake up!</td>
                            </tr>
                            <tr>
                                <td style="color:#999999; font-size:16px; padding:15px 0px;">Something just happened!</td>
                            </tr>
                            <tr>
                                <td style="color:#999999; font-size:16px;">You got a new lead from your website!</td>
                            </tr>
                            <tr>
                                <td> </td>
                            </tr>
<tr><td valign="top" style="background-color:#f8f8f8; padding:5px"><table cellpadding="0" cellspacing="0" width="100%" style="background-color:#f1f1f1; color:#555555; font-size:14px; font-family:sans-serif;">
<tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px">Customer Name</td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;">[customer-name]</td></tr> 
 
<tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px">Company Name</td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;">[customer-company]</td></tr> 
<tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px">Email</td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;">[customer-email]</td></tr> 
<tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px">Service required</td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;">[service]</td></tr>
<tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px">Message</td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;">[customer-message]</td></tr>
                                    </table>
                                </td>
                            </tr>                            
                        </table>
                        <br><br><br><br>
                        --------
                        <br>
                        <p style="font-size:14px;">This e-mail was sent from the Contact Form 7 plugin form  (https://www.YOUR-WEBSITE URL.com)</p>
                    </td>
                    <td width="18"></td>
                </tr>               
            </table>
        </td>
    </tr> 
</table>