Author:
Mike Adams
04/27/2012
Recently, I needed to send an HTML email to a list of graduating seniors here are UC Davis to let them know about some Adobe deals we had. How was I going to do this though? I researched Google and found several different options involving having to use Internet Explorer to “Send page by e-mail”. This was not what I wanted though. I wanted to send it through Outlook. So after even more digging, I finally found the solution and wanted to share it with everyone else. (Hopefully you don’t have to do as much digging as I did to find this page.) Read on after the break.
First, you need to create your e-mail and save it in an HTML format. In my case I named mine “adobe test.html”.
Open up Outlook 2010 and create a “New E-mail”.
Click on “Attach File”.
Find your .html file (in this case “adobe test.html”). Then, click on the drop down next to “Insert”. Click on that, then scroll down and click on “Insert as Text”.
Your .html file will then be placed into your e-mail as you were intending. Make sure to test out links, etc. before sending to recipients.
All you have to do after that is hit send. But again, make sure to test and tweak your work. Each e-mail provider (from Outlook to Hotmail) offers different interpretations of your HTML e-mail. Certain ones don’t care if you use an image map, but Outlook will not let you use it. Make sure you search around for the latest restrictions on HTML emails with various platforms. If anyone has better ways to accomplish this, please be sure to leave a comment at the bottom. Until next time…
Update for Office 2013
Author:
Mike Adams
04/30/2014
It has been a very long time since I have updated anything, but I see that this post still gets a LOT of traffic, so I wanted to give a quick update. While the actual program may look different, the steps listed above still work exactly the same for Outlook 2013.
UC Davis Bookstore TechTalk 
thanks for the information on how to send a good mailing! love the post
thanks for this information! I am using Outlook 2010 to send the HTML file in the body of the email, but when I send it, the breaks appear between images and some images are missing when I use this approach. However, others in my office don’t have the same problem and your instructions are working just fine. It is important to send this html file from my computer to my clients. Are there any special settings in Outlook that might need to be enabled/disabled to make this work? thanks in advance for any information.
Hi,
Even I am facing same problem 😦 tired of fixing this image breaking issue. Actually this issue is because of style=”display:block”; getting ignored when we send mail from outlook.
Please suggest any solution for this.
nice it’s working thank u
I copied your html code, just as a test, and did what you said for Outlook 2010, but it came back as the same source code, not a visual rendering of it. What did I do wrong?
you have to paste what u copied into a new notepad file and then save that as html then follow the rest of the steps. also u dont have the native images or maybe even the fonts and so on that he had in his design.
It would be wonderful if it were this easy. When I do this – inserting my html file as text – it doesn’t pick up the images. Everything’s linked correctly; it all shows up in my browser window when I try opening the html file there. But in the Outlook message window, I’m getting text placement and hex-specified colors…but not even placeholders for my images.
I am sad 😦
thanks for the information.one more question
suppose we have a html file and on it a submit button is there.
if user click on it ,can we send it the page as with same properties(same font and style) via outlook. i.e automatic
I got this to work beautifully; thanks for the article! I think I see what many of the folks above are missing: In Step 1 (“First create your e-mail and save it in an HTML format”) be sure you end up with: a) an HTML file, and b) a folder containing all of the images referenced by that HTML file. That way when you proceed to the other steps, the images are there. To demonstrate this, use Internet Explorer to browse to a fairly simple web page, then click “Tools” (the gear) > “File” > “Save as”, then change “Save as type” to “Webpage, complete (*.html)”. This creates the HTML file and the essential folder containing all of the images referenced by the HTML file. You may want to use a website creation tool (i.e. Front Page) to accomplish the HTML file and the folder of images.
THANKS Patrick. Your comment cleared it up for me and it works like a charm! THANKS also Mike Adams 🙂
This was just what I was looking for! A very simple and easy process. Thank you!
Thank you to all the good people who spend time to help others. Microsoft create the problems and offer no solutions. Now I have answers to sort Outlook I am smiling again and life is worth living once more.
Anyone accomplished inserting a Table with background image? Something like … style=”background-image:url(’roundedborder.png’);background-repeat:no-repeat” ? All my HTML holds nice in the new mail, apart from the table background. I guess this is too much I would wish for?
@Patrick – I do, in fact, successfully save my files as html. And my images are stored on internet-connected servers and referenced via absolute URLs. As I said, when I open the html file in my web browser it’s perfect. All images present and accounted for. But when I paste that same html file into my Outlook “new message” window as text….no images at all.
Thank you, so simple when you know how. And now I do
Thanks for your tutorial! It helped me look super smart to my boss.
Thank you very much.. it worked
This worked wonderfully till I got to the bottom of my email and the bottom portion was cut off and not included at all. it’s on the original html page I created but the email will only go so long in lenth of the page. What do I do to make the page longer so all of my content will show up?
Thank you very much!!!!!
Thanks
In Outlook 2003 and 2007, on a PC, you can simply put the saved html file onto your desktop, then click and drag it over into your Inbox in Outlook folder list, and it will automatically open as an HTML email with the content in the body. If it doesn’t, then from the Tools menu select Options > Select Send tab > Choose HTML in the Mail Sending Format.
You can also view the html file in a web browser, select all> copy> and paste into an Outlook message.
In Outlook 2010 you can’t do the drag n drop trick or the copy and paste one, you need to use the info at the top of the blog.
For your HTML file, you will need it to use “inline CSS” and get it made using tables-based layout and then run it through the easy inliner tool at http://beaker.mailchimp.com/inline-css
For current guidelines and tips on what will work in html emails, see
http://www.campaignmonitor.com/resources/will-it-work/guidelines/
Hi, the html file i insert in my mail contains a form with some inputs suche as , etc… When I recieve the mail the inputs are not visible anymore…
It worked with Outlook 2003 very well, whithout doing anything …
Is there any option to read HTML forms, not the outlook ones because i send mails using a Java program.
* such as : select, input type=”submit”….
Hi thanks heaps!! Out look makes it look crappy tho..not your fault so thanks again!!
thank you!
I followed all directions and was successful except for the image “float-left” property. In all web browsers I have text that floats to the right of some images, but in Outlook the text drops under the images. Any solutions?
Thanks so much for this.
Thank you thank you! Exactly what I was looking for!
Thank you…spent some time on the outlook help…could find a solution…thanks again!
It doesn’t work with HTML5 and CSS3. 😦
Thank you Mike for this great information. Now I can easily send powerful creative e-mails using this simple technique. Just download the template you like (most of them are free to use) add your text, replace the existing photographs insert as text and send.
thanks alot, this is exactly what i’m looking for and it works fine.
I used to create and send HTML newsletters from Outlook way back in the early 2000’s. In that earlier version there were 2 tabs, one for text and one for HTML so it was really easy to create either. I have been wondering how to do this lately, and am very happy to find your post. Thank you, Mike.
Thought that this resource might be useful: http://www.emailology.org
It includes a template
How did you create your email? What did you create it in first before saving it to HTML? I see that your HTML is in Notepad, but when you attach into email it is in Google Chrome Docs. How did you get there? Thanks.
Hi KSG,
That is not a Google Docs icon. Google Chome is just the default program to open my .html files. I just used Notepad to create the file, saved it as an HTML file, and you just follow the other steps in order to open that HTML file in Outlook.
Hope that helps!
Mike Adams
Hi Mike,
Sounds like what I need is to download an HTML Template, as referenced by others above, remove the image and replace it with mine. I tried Notepad and could insert the image we want to send as HTML. I am not familiar with typing in the HTML lingo to create HTML.
Make that couldn’t insert the image. The disconnect for me is how to get the image into HTML.
To get the image into your html, you need to add the tags – written in html format:
To insert an image in html: You need to know the filepath for the image (where the image is saved on your computer) – within the “” tag – you can also alter the height and width of your image using ” note that the values entered into the width and height are in pixel measurements. Then when you follow the guide above on how to create an email using html – it will automatically put your image into the email when reading it from you html file that you created.
NOTE: to save a notepad file as an HTML file, you select “save as” , then save your file as email.html – typing “.html” after your chosen filename is what makes it an HTML file – the icon produced in the folder you chose to save you file in – will be the icon for your chosen default web browser – windows explorer, google chrome, safari, opera browser etc….
Hope this helps – We were all newbies once!
haha – can’t believe I wrote that and they’ve stripped out my code lmao! Sorry bro – I did actually give you the code but never mind. Gimme an email: rytirrell @ gmail . com and I’ll send you the code again.
thank you so much 😀
thanks a lot.. this is what exactly i am looking for 🙂
thanks a lot. needed this
Thanks for the information. It was very helpful.
Thank you so much for posting this…I read through what felt like novels of info on other sites (seemingly irrelevant) before my colleague sent me this and I am SO grateful that he did, and that you wrote it for him to find. Thank you.
Awesome! Really glad this article helped you out. I know I spent forever looking for how to do it myself 🙂
If you’re having problems with the above method, try this: http://www.outlook-apps.com/insert-html-to-outlook-emails/
nice post i got conclusion from this….. thanks you so much…
Fantastic! Just what we needed! For anyone doubting this definitely works!
Thank you i really need this.
Thanks a lot
This was an incredibly helpful post and it worked like a charm. Thank you!
My html file has 6 images laid out in Dreamweaver in divs. I inserted the html file in Outlook 2013 and it put the 6 images into the body of the email but they were not side by side like in my layout. It placed them one after the other from top to bottom, each image on its own line. Do I need to design it with tables instead of divs?
Hi. I have struggled for weeks with various types of web design software, trying to generate interesting looking Outlook emails. Hoo boy, was I pleased to discover your fantastic advice! You deserve a medal. A big thank you from me!
YOU R REALLY GREAT THANK YOU SO MUCH FOR THIS WONDERFUL INFORMATION
there is no send button, how should i sent?
This does not work for me. I’m exporting from Photoshop to html (html and images), then when i attach hmtl file to Outlook (as text) everything looks OK, but when recepients opens email, he gets can’t display pictures and red cross sign, any idea what am I doing wrong?
Oh I get it now, the images must be uploaded to server, so the recepients can’t see them 🙂
Wow, you’re the best. You just rescued me from a problem I had for about three weeks
If I could kiss you, I would. Have been trying to figure this out for awhile!
Thank you i really need this.
Hi,
I used this methond and it works great. The only Problem I have is that I added a string, in order to track the opening rate in Google Analytics.
The string I am adding is:
But when I send the email, this string gets “corrupted” by Outlook and it is transformed into this:
Any ideas???
It seems the code got deleted.
I use “img = “/google-analytics.com/collect?…..” and the outlook changes everything into something similar to:
1) src=”cid:image007.gif@01D0D9AE.4D6ED370″
2) all the coude from the img tag is moved into the “alt” parameter
3) all the “;” are replaced by “&”
Any thoughts on how to get this to work for Outlook for Mac?
Fortunately, I still have my PC laptop. I’ll test this out there.
Thats it!
Lot of people complicating and you simpled it!
Thanks
“Insert as text” no longer exists in Outlook 2016 😦
Nevermind, solved it with this:
http://www.msoutlook.info/question/classic-attach-file-button
Thank you verymuch !!!! 😀
Reblogged this on AB's Reflections and commented:
Basically use the “Insert as text” option when attaching the HTML file
You are awesome. It’s the most simplest way to achieve it 🙂
Thank you for the info you are the best.
works fine, thanks, even when the html file includes images folder