How to insert your HTML into an email message and stop Outlook from messing it up

More than 1.1 billion people use Office. That’s 1 in 7 people on the planet. Microsoft Outlook is the go-to email client for business and a stunning number of users use it in everyday work. It is a very powerful email client, but sometimes this power is a shortcoming.

One such case is using Microsoft Outlook to send HTML-formatted newsletters or forms. “But Outlook allows me to create HTML-formatted messages using a lot of controls and styles,” you might say, and you would be 100% right. But as soon as you try to create an HTML message using special software and use the resulting HTML as a source for your message, you will be surprised: Outlook doesn’t allow you to use your own HTML source to build a message! “OK, but it is not a big problem” – you say, and again you may be right, because you can open the resulting HTML message using Internet Explorer and copy-n-paste the data through the clipboard into the Outlook message. Yes, this can be done, but there is a surprise waiting for you.

Beginning with Outlook 2007, Outlook only supports Microsoft Word as an engine for generation and display of messages in HTML format. The previous versions of Microsoft Outlook used Internet Explorer as an HTML engine. These technical changes cause significant differences in both the appearance of the resulting message as well as in the HTML code itself, which undergoes alterations and corrections. At first glance, this does not seem to be a big problem…but only at first glance.

Why is it so important to save the initial HTML code of emails?

The answer to this question is very simple – to be sure that your HTML email will look the same in Microsoft Outlook and in Google Mail, Apple Mail and in email clients on tables and mobile devices. By creating an HTML email using an HTML editor that is not Microsoft Word or Outlook, you have the chance to test how the code will display in various browsers and mail clients. For example, you can use a free online service from Litmus Software which will let you test your HTML code’s appearance in more than thirteen email clients:

https://litmus.com/email-testing

Using an HTML editor along with a testing and optimization tool like this, you can create rather complex HTML messages and be confident that they will appear properly for all recipients. But this remains the case only so long as your HTML source code stays in its initial form. As soon as you put your code into Microsoft Outlook through the exchange buffer, the whole code will be transformed and corrected.

What is the HTML body of the message?

We’ll create a simple HTML file:

<html>
Hello <b>World</b>!
</html>

The file size is 36 bites. We open this file in Microsoft Word as HTML and save it as HTML with a different name. We see that the size of the resulting file is 35.8Kb! Just like that, the file size increased 1000 times! But it looks the exact same as before. To clarify what the differences are, let’s look at the source of this new HTML file:

Insert HTML code into Outlook message

Visit Send Personally for Outlook homepage and download the add-in to send your emails with original HTML code!

 

So we see that our simple HTML text has been enriched with a huge mass of ‘garbage’ that has come seemingly from out of nowhere, and which is many times greater than that original text in its initial format. After this transformation, we can no longer be sure that this code will appear the way that we want it to.

Why does Word change initial HTML code in the email body?

These changes occur because Microsoft Word is not an HTML editor; it only allows import of files of that format. That means that the source text was imported into Microsoft Word and then exported back out as HTML created at the time of saving the document – and the minimum file size for this HTML is 35 Kb. But that is when the HTML format is chosen when saving. There is, actually, a way for Microsoft Word to save in a different format, called HTML-filtered, which will filter out most of the added garbage. This method results in a file of 5Kb, which is still 10 times more than the original source file.

Note that although we are discussing Microsoft Word, all of this concerns Microsoft Outlook as well, since the same HTML engine is used in both products. The HTML-filtered format is what is used when generating emails in HTML for Outlook. This means that Microsoft Outlook simple does not allow us to create a message in HTML that is less than 5Kb (and that is an empty message).

This transformation of the message by the Outlook editor is another drawback of the product. Imagine a situation where the template of a weekly newsletter is created using an HTML-editor to avoid destroying the HTML formatting of the document when importing and exporting it using Word. When this document is placed into the body of the message in the Outlook editor (using the copy-n-paste option), our HTML code will be transformed and made much more complex, which can destroy the initial formatting and display the document incorrectly when it is received by other email clients and browsers.

Microsoft Outlook does not provide any options to send messages without transforming the HTML body. There are some plug-ins in the software market that allow editing of the message body in HTML, thus avoiding transformation. But these, unfortunately, do not solve the problem, because Microsoft Outlook still executes the transformation as soon as you click “Send”. This means that there is no different between creating a nice-looking HTML email in a special HTML-editor and pasting it into the message via the exchange buffer and then sending the email, and using a special program to let you paste HTML code in its initial format when creating the email. In both cases, the recipient receives a larger and reformatted message.

How can one save the initial HTML source code?

Regardless of the limitations of Microsoft Outlook, there is still the possibility to send an email with its initial formatting without executing an HTML transformation. This can be done using the Send Personally, which is a Microsoft Outlook add-in designed to send mailing lists with personalized greetings – which is very convenient in newsletters, announcements, and promotions. But right now, we are most interested in this program for its ability to work with the HTML source of the message body.

Send Personally for Outlook

This program adds an Insert HTML to the ribbon in the message editor section; this option appears when we create a new email or answer an existing email. When we click on the Insert HTML button, a window opens, showing the HTML source of the current message. In this window we can create HTML code for the message and edit it. Even if we have just created a new email and have not yet written anything in the body of the message, we can click on the Insert HTML button and we see that Outlook has already put in all the ‘necessary’ HTML coding in:

Insert HTML code into Outlook

Using this window, we can simply select the whole text that has been added by the Outlook editor and replace it with our own, using either the exchange buffer or the “Load from file…” option.

HTML code in Outlook email message

You can then use the Preview option to see the resulting HTML, or click OK to save the new text in the message body. Note that we cannot edit the text in the message using the Outlook editor, because Outlook will immediately transform our source HTML. If we need to carry out further modifications in the message, then we will need to client the Insert HTML button again and make the changes in the window.

At this point, we have created an email and not allowed Outlook to transform the source HTML, but this is only the first step. Next we need to prevent modification to the message when the Send button is clicked. This task is performed using the Send Personally button. The issue is that this program sends messages through the MAPI system and does not call the handler which are triggered when the Send button is pressed. With the Send button never being clicked, no transformation occurs. So all the needs to be done is to press the Send Personally button instead of Send.

Send Personally for Outlook

Presently, this is the only way to send an HTML email from Microsoft Outlooks and preserve the original HTML formatting. To verify this, go to the Sent folder of Microsoft Outlook and double-click on the message to view it, and then right-click on the message body and choose the View source option. Doing this, we see:

HTML code of email message in Outlook

There are 2 key points to remember here:

  1. The email can only be edited in the HTML editing window. This is true for any modification. Outlook will change ‘our’ HTML to its own HTML even if we simply change the user account from which the email is sent.
  2. The message must be sent using the Send Personally button, not using Send.
Visit Send Personally for Outlook homepage and download the add-in to send your emails with original HTML code!

6 thoughts on “How to insert your HTML into an email message and stop Outlook from messing it up

  1. hi

    i need the html format of outlook email to be in such a way that i see that check symbol or correct/yes symbol in mail itself.
    Now in current situation i have to go in Action -view browser mode and than all yes/correct symbol appears.
    si there any provision i can see it in initial mail when someone forwards me to the mail.

    regards,
    Anand

    1. Hello Anand,
      Thank you for your question

      Outlook blocks a lot of HTML controls from displaying them in messages, and you can view them merely in browser.
      Our add-in can help you send your HTML formatted text, but unfortunately, we are unable to affect displaying messages in Outlook.

  2. Well I have a requirement where I copy the outlook Mail body and place it in a control and the control have editing capability (i.e bold,italic,color,size etc.). But unfortunately only plain text is being edited but not rich text. I find out the mail body is of format OIformatHTML. Is it different from regular HTML ? Why I am not being able to edit rich text although my control have that capability !!!

Leave a Reply

Your email address will not be published. Required fields are marked *


− one = 8

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>