Search code examples
htmlcsswordpressoutlookhtml-email

Empty HTML mails in outlook.com, microsoft exchange & hotmail.com


I have to style an email and when I was done and tested it all seemed to work fine, except in outlook.com, Microsoft exchange and Hotmail. For some reason exchange strips all code used (tables, tr & td tags) whatever I do, is there some workaround or is it just not possible? I have used CSS in my <style> tag. Should I change that to inline styling? or is there some other use.

Also my mail uses certain values (shortcodes) which are being given by the form, this works all fine in all other mail boxes but again not in outlook. If I can't use code there is there some workaround for that too?

So long story short, how can I use code in my html-email if Microsoft exchange breaks all code and gives a blank mail. The entire mail you can see here on my test site

Here is my mail code:

<style> 
td {
    text-decoration: none;
    color: #78797a;
    width: 420px;
    line-height: 22px;
    border: 1px solid black;
    }
    
img {
     display:block;
    }
    
h3  {
        text-decoration: none;
        color: #434343;
    }
h4  {
        text-decoration: none;
        color: #434343;
    }
-webkit-text-size-adjust: none;
</style>

<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top"><br>

<h4>Verwijzend arts</h4>
<tr style="padding: 10px">
  <td> Naam</td><td> [naam_vw]</td>
</tr>

<tr style="padding: 10px">
  <td> Voorletters</td> <td>[voorletters_vw]</td>
</tr>

<tr style="padding: 10px">
    <td> Geslacht</td> <td>[geslacht_vw]</td>
</tr>

<tr style="padding: 10px">
    <td> Functie verwijzer:</td> <td>[verwijzer_vw]</td>
</tr>

 <tr style="padding: 10px">
    <td> Naam instantie:</td> <td>[instantie_vw]</td>
</tr>

<tr style="padding: 10px">
    <td>Adres:</td> <td>[adres_vw]</td>
</tr>

<tr style="padding: 10px">
    <td>Postcode:</td> <td>[postcode_vw]</td>
</tr>

<tr style="padding: 10px">
    <td>AGB code verwijzer:</td> <td>[agb_vw]</td>
</tr>

<tr style="padding: 10px">
    <td>Mobiel verwijzer:</td> <td>[mobiel_vw]</td>
</tr>

<tr style="padding: 10px">
    <td>E-mail:</td> <td>[email_vw]</td>
</tr>
</table>

Shortcodes such as [email_vw] are the ones that are being given via the form which need to be in there.

Any tips and answers are appreciated thanks in advance!

EDIT * I was able to fix outlook myself but now Hotmail is for some reason empty and shows just plain code, would this be caused by the code being inline? *


Solution

  • Well after some searching and reading @tvgemert's article link I was able to fix outlook.

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
        <table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
    <img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top" style="display: block;"><br><h3 style="text-decoration: none; color: #434343;">Met deze brief verwijs ik onderstaande client naar u voor een programma medische specialistische revalidatiezorg (MSR) bij BeLife.</h3>
    
        <h4 style="text-decoration: none; color: #434343;">Verwijzend arts</h4>
        <tr style="padding: 10px;">
    <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Naam</td>
    <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> [naam_vw]</td>
        </tr>
    <tr style="padding: 10px;">
    <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Voorletters</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[voorletters_vw]</td>
        </tr>
    <tr style="padding: 10px;">
    <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Geslacht</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[geslacht_vw]</td>
        </tr>
    </table>
    

    This has fixed outlook at the least by adding inline code the email is now no longer blank.