phphtmloutlookoutlook-2016

Outlook not displaying a portion of HTML

The Issue

I am writing a new form handler, every step of the process is automated, I manage what fields show on the form using a CMS and then that information will appear on the email when it is sent to the recipient.

Every step of this is working, except for actually sending the data collected in the form. This was working before when the data was static but now that it is dynamic the information doesn't appear on the email.

The weird thing about it is that the information is actually being sent, but just isn't displaying in Outlook, I assume some part of the HTML fails to render somehow but I've exhausted all of my thoughts and need some fresh ideas.

In case it is of any use I am using Outlook 2016.

What does the email look like in Outlook?

I've provided an image below, please note the blank area under 'Contact Information'.

enter image description here

How do I know the information is being sent?

When I view the email in a web-browser I can see all of the information on the email, this is what it looks like:

enter image description here

The HTML

<h1>{:formName:}</h1>
{:formIntro:}

<h4>Contact information:</h4>
<div class="main-content">
    <table class="details" width="500" align="center" border="0" cellpadding="0" cellspacing="0">
        {:formData:}
    </table>
</div>

{:formMessage:}

The PHP

$html = str_replace('{:formName:}', $form['name'], $html);
$html = str_replace('{:formIntro:}', $form['intro'], $html);
$html = str_replace('{:formData:}', $input_data, $html);
$html = str_replace('{:formMessage:}', $message_data, $html);

The Output

<h1>Contact</h1>
Lorem ipsum...

<h4>Contact information:</h4>
<div class="main-content">
    <table class="details" width="500" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr><td>name</td><td>Mark Overton</td></tr>
        <tr><td>email</td><td>test@test.com</td></tr>
        <tr><td>title</td><td>Mr</td></tr>
        <tr><td>phone</td><td>777777777</td></tr>
        <tr><td>message</td><td>TEst</td></tr>
    </table>
</div>

What I've tried

What do I need from you?

Ideas, anything that you think could be causing this issue.

I am happy to provide whatever information you think might be useful but at this stage I'm not sure what that is, I'm not sure if anyone has had a similar issue in the past and would be able to point me in the right direction.

Solution

  • Finally worked this out:

    The reason it was hidden in Outlook was because of the following code in my template:

    <!--[if gte mso 15]>
  <style type="text/css">
  table {
    font-size: 1px;
    line-height: 0;
    mso-margin-top-alt: 1px;
    mso-line-height-rule: exactly;
  }
  * {
    mso-line-height-rule: exactly;
  }
  </style>
<![endif]-->