contact form 7 (wordpress) style the hml mail template

2 Views

I´m using contact form 7 (wordpress, contact form) as a order page
for products. But I´m interested in styling the HTML-Mail-template in the same 3-column style
as the picture. Is there any easy way to do that?enter image description here

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. I think the two previous answers misunderstood the question. Johny is asking how he can edit the html email that gets sent out by contact form 7 either to himself or the person who completes the form.

    To do this you need to select the option of “Use HTML content type” in order to use html in the email. This is on the “mail” section of CF7.

    Then the easiest way to style the html email template is using a table.

    1. First start with a blank html template with a XHTML doctype:

      StackOverflow Email Template

    2. Then you can add any html and information you need to, to get it looking the way you want it:

    For instance it is probably easier to start with no margin or padding so you add some style to the body tag:

    <body style="margin: 0; padding: 0;">
    1. Then you need to add all your style inline in the table as there are no style sheets sent with your email. You could also create an inline style section in the section as with normal html.

    so I would do this for your example:

    <table align="center" border="0" cellpadding="2" cellspacing="0" width="100%" bgcolor="#ffffff" style="border-collapse: collapse; font-family: Arial,sans-serif; font-size:1em;" >
    1. Once that is all set you need to add the cells to your table.

    As an example your first and second row could be something like this:

    <tbody>
    <tr>    
    <td colspan="6">To: [your-name]</td>
    </tr>
    <tr>
        <td>Falt Utan Flask:</td>
        <td>[Input-One] Back</td>
        <td>Falt Utan Flask:</td>
        <td>[Input-Two] Back</td>
        <td>Set Datum:</td>
        <td>[Date-324]</td>
    </tr>
</tbody>

    Each will be a new row, and each section will be a new cell. Then just keep populating and building out your table to display the way you want it.

    You can add inline style into the or elements as you need it or you can add the inline style in the area as mentioned before.

    This is what i needed to do for a website using the contact form 7 plugin. I found these to tutorials very helpful.

    1. Tut 1

    2. Tut 2

    Hopefully I have not misunderstood the question myself, it is a bit ambiguous, but it was the closest one I found to what I was looking for.

  2. Yes you can do it, you need to add some css to your existing theme file, as plugin files modification is not recommended, as i can see you have use the text boxes, you can do something like this

    css style

    .wpcf7-text { width:150px !important; }

    .wpcf7-text is the text box class in contact form 7
    in form settings

    your name- [text- text-20]

    your addres- [text- text-30]