Beekeepersblog logo

Contact Form 7 WordPress plugin image icon

HTML code in the Contact-Form-7 Email tab

/ Contact Form 7

Contact-Form-7 provides a standard text with tags which output a plain text in your Email message. You can also customize the output of the Email message with HTML code.

Using the standard Form, you can see the output as plain text. As you can see it is hard to read which is the title and which is the user’s output.

Standard mail output with no HTML code - image
Figure 1: Screenshot of the Contact-Form-7 plugin page, Front end form and a default form received on the email.

Let’s place all the same contents inside the HTML table. Because you cannot add any external css, you need to add everything in the Table itself as a inline css. Let’s keep it simple border="1" and cellpadding="5".

<table border="1" cellpadding="5">
    <tr>
        <td>From:</td>
        <td>[your-name] <[your-email]></td>
    </tr>
    <tr>
        <td>Subject:</td>
        <td>[your-subject]</td>
    </tr>
    <tr>
        <td>Message Body:</td>
        <td>[your-message]</td>
    </tr>
</table>

--
This e-mail was sent from a contact form on
WordPress Playground (http://localhost/wp-playground)

Here’s how it should look in your Message Body in your Mail tab. You can copy the code from above and change the field to your need.

Make sure you check the option that says Use HTML content type. without this the Contact-Form-7 will not read your HTML elements.

Included HTML code in the Message Body of Contact-Form-7 - image
Figure 2: Screenshot of the Contact-Form-7 plugin page with HTML tags added.

You can test out the form and you should have something like this.

Mail output with HTML code - image
Figure 3: Screenshot of the email with the form inside the HTML table.

As you know if you have not used any tags, it will be in darker color and rest are in light gray. Lets use this tag in our table.

Unused mail tag in the Mail tab - image
Figure 4: Screenshot of the Mail tab with a mail-tag that is not used.
...
<tr>
    <td>Country:</td>
    <td>[your-country]</td>
</tr>
...

Here’s the output with the new country text.

Mail output with all mail tags with HTML code - image
Figure 5: Screenshot of the email with newly included country inside the HTML table.