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.
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
<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.
You can test out the form and you should have something like this.
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.
... <tr> <td>Country:</td> <td>[your-country]</td> </tr> ...
Here’s the output with the new country text.