How to Upload Html File to Email

Today, I'll testify you how to create "HTML emails" and transport them in Gmail. The benefit of doing so is that you can design e-mail campaigns and then edit and send them directly inside Gmail, either as a campaign or just as part of regular email correspondence.

And once you've done that, you lot can save your HTML email equally a template to use again.

Why importing HTML into Gmail "doesn't work"

If you lot take HTML code and paste it "raw" into the Gmail etch window, information technology won't return annihilation else — information technology will just appear as HTML code. And then, HTML on its ain won't help you format the shape or appearance of your emails.

And so, I'll show you how to work effectually that.

How to send HTML email with Gmail

There are three ways yous can load the Gmail Compose window with your custom HTML.

1. Re-create/paste the rendered HTML into the Gmail Compose window.
2. Paste your HTML code into the Gmail Compose window using Chrome's Developer Tools
3. Use a Chrome extension to add together an HTML editor to the Gmail Compose box

My favorite technique is #ii because it gives me the well-nigh command and doesn't crave an extension. Every extension you add to Gmail crowds the interface just a tad more than.

Selection 1: Copy/paste rendered HTML into Gmail Compose Window

On its ain, the Gmail Composewindow doesn't let yous edit theHTML "behind" the message. This is in dissimilarity to an e-mail service provider similar Mailchimp or Constant Contact, in which y'all can edit the raw HTML. And then, the technique below is a way to piece of work around that Gmail limitation.

One time you take your HTML written, the process is basically just a matter of copy and paste. You create your page in HTML, load it into a browser, copy the contents of the browser, and then paste it into Gmail's compose window. By "rendered" HTML, I mean what the HTML looks like in the browser, with colors, fonts, and images in place.

Let's run through a quick example of that.

Creating and sending your HTML email in Gmail

Step one: Write your HTML.

For this instance, I'1000 using some boilerplate HTML adapted for our purposes. HTML can be either written directly or, possibly, composed with an HTML authoring tool. Gmail is a piffling picky with what it will allow as HTML in its emails, so here are a few important guidelines:
– You can't use external style sheets, though you lot can use inline CSS (e.g., <td style=bgcolor="white" align="centre">) also equally embedded CSS in the head. For more than details about exactly what you can and should utilize in Gmail, run into this page.Annotation: Gmail changed their support for CSS in 2016, so older posts online may claim they don't support things they actually exercise. The post I linked to is up to engagement with that change.
– Some HTML tags may not be supported. This list (which may not exist perfectly electric current) shows HTML tags that are supported and some that are not.
– Gmail does non support web fonts. So, either utilise the standard fonts they provide or, if you lot desire another font for something similar a logo, make an image of that text. And then, in the HTML, link to that image hosted online, which is what I have washed for the "Binkman'south Books" logo in my sample electronic mail below.
– All images take to be hosted online somewhere — they can't be included in the e-mail. You can host images on Imgur, Amazon Spider web Services, Google Docs (if you can get a direct link to the paradigm), or whatever other identify intended for hosting images.
– Using tables to organize the brandish of contents is the recommended manner to go for HTML emails. However, even using tables, there are nonetheless bug to sentry out for.
– Google Docs for composing could be problematic. Although there are tutorials out there about using Google Docs to create your HTML email without coding, when I tried it, I constitute that what was displayed on Google Docs was not exactly what appeared in the email (east.g., something that was centered in Google Docs was left-aligned in the email).
– Keep it uncomplicated. Because what Gmail volition support is somewhat unpredictable, information technology'south best to keep things fairly elementary in terms of the HTML. (That'southward probably a good thought from the point of view of recipients, too. No ane needs an overly circuitous email.) Keeping things simple besides helps your recipients' email clients return things as you lot intend them, particularly when information technology comes to responsive email design.
– Create a template. One time you lot have your HTML file formatted, save it as a template outside of Gmail. Then in the hereafter, you lot can use that template to set new emails just by replacing a few words without having to recreate the HTML code to configure your layout, logo placement, and so on.
– Think, Gmail is a work-in-progress. Gmail keeps irresolute, so blog posts or online answers from a few years ago are already out of engagement. If you're researching how to do anything with HTML and Gmail, try to observe content that is every bit recently written as possible.

Stride two: Brandish the rendered HTML page in a browser.

I used Chrome and just opened (Ctrl-O) the .html file that was on my computer.

Step iii: Open a Gmail Compose window and paste it into the principal text surface area.

The HTML email should appear in the compose window. Double-check (including scrolling down to the bottom) that everything looks appropriate earlier yous send the email.

Step 4: Send your postal service merge with GMass. As usual, simply hit the ruby-red GMass button.

That'due south it! The overnice thing near this arroyo is when you lot save the HTML file every bit a template, your future HTML emails will look consequent and build a "brand look" in your emails. Information technology also saves you a huge amount of fourth dimension crafting new HTML emails, and you don't have to create whatsoever external CSS files.

Of form, this technique can be combined with any of the other ways to use GMass, such as from a Google Docs spreadsheet or fifty-fifty as function of an automated email sequence.

Option 2: Paste the HTML code into Gmail using Chrome'southward Programmer Tools

This technique is a Gmail and Chrome hack. Yous right-click in the Gmail Compose window, notice the relevant HTML portion of the box'south element, and then paste in your HTML lawmaking.

First, correct-click anywhere in the Compose box and choose Audit.

Chrome volition then split itself and open up up a pane showing the HTML of the Compose box, and ane part volition be highlighted.

Notice the "div" marked "contenteditable=true", and then right-click and choose Edit as HTML.

The part inside the "div" tag is the role you should replace with your custom HTML code.

Here I have my custom HTML lawmaking in the Sublime text editor:

Only here information technology is for you as well, in instance you want to effort copying/pasting this yourself:

              <h1>This is my headline</h1>  <p>This is my first paragraph.</p>  <p mode="font-weight: bold;">Hither is some bold text.</p>  <p>Here is an image of a lord's day:</p> <br> <img src="https://image.shutterstock.com/image-vector/sorry-sun-wearied-heat-vector-260nw-200226281.jpg">          

Finally, here is my lawmaking pasted in:

and as soon equally I click away, the Compose window is filled with the rendered version of the HTML.

Choice 3: Apply a Chrome extension to Send HTML Email in Gmail

There are several Chrome extensions that add a slick HTML editor to the Gmail Compose window so that you tin edit the HTML behind the scenes in an easy-to-apply manner. In Pick 2, y'all are also editing the HTML behind the scenes — only doing and then directly by hacking the code behind the HTML page. Chrome extensions let you exercise the same affair merely brand the entire HTML lawmaking procedure easier.

Chrome extension 1: Gratuitous HTML Editor for Gmail by cloudHQ

This is the near robust of the HTML editors considering it includes WYSIWIG design tools every bit well. The one annoyance that comes with this extension is it requires you to create an account with them. They don't require OAuth access to your Gmail account, but they practice require Google Sign-in privileges. That doesn't inherently put your account data at risk, merely information technology's abrasive because the functionality should be able to be achieved all on the client-side.

Click the extension's icon at the bottom of the Compose window.

Their email design tool looks similar this:

The design tool takes over the Compose window until you lot click "Close Editor."

You can also picket their video to see their extension in activeness.

Chrome extension 2: GMass

My own Chrome extension includes an "HTML" office so you can view and set the HTML into the Etch window.

Launch the Settings box and click "HTML."

Paste in your HTML.

Hit Okay, and sentry the magic happen.

Note that to use just the HTML editor functionality of GMass, you don't need to subscribe to a paid program.

Chrome extension iii: HTML Inserter for Gmail

This is a corking extension that'due south ane of my favorites because information technology doesn't require any OAuth access to my Gmail account. It works entirely on the client side without sending any information dorsum to a server.

You can apply it in 3 easy steps:

1. Click the HTML icon.
   
2. Paste your HTML.
   
3. Click the Insert HTML button and watch your formatted message appear.
   

So, every bit you lot tin see, you tin can create basic templates for bulk emails without learning to apply a developer tool or hiring an email template designer. You don't fifty-fifty need to know how to lawmaking from scratch if you tin copy and paste the HTML version of an existing e-mail.

Best of luck creating your next electronic mail template!

Ajay is the founder of GMass and has been developing email sending software for 20 years.

dorsettvilt1962.blogspot.com

Source: https://www.gmass.co/blog/use-custom-html-in-gmail-compose-window/

Share this post