Contact-Form-7 Email Message Body with HTML Table

The Contact Form 7 provides a standard text with tags which output a plain text in your Email body. You can also customize the output of the Email body with HTML elements. We will output the standard code with HTML table.

Here’s a standard form output.

Image01.jpg

We will place all the existing content inside a html table. Make sure you add the table properties 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)

Copy the above code and paste it inside the Message Body of the Contact form 7.

Mark the option that says ‘Use HTML content type

Image02.jpg

Now go to front end, fill in the form and send it. You should have something like this.

Image03.jpg

If you have not used any tag, it will show up here as dark color. Lets use this tag in our table.

Image04.jpg
<tr>
    <td>Country:</td>
    <td>[your-country]</td>
</tr>

Here’s the output.

Image05.jpg

Yes, you can also color the cells using the inline-css in the table. Try it out.

Copyright © 2006 - 2017 beekeepersblog. All rights reserved