Easy step by step tutorial: how to send a HTML email with Gmail

Written by: Sapphire Li, BA

Communications specialist, 8+ years writing and copywriting for companies
Just copy and pasting its design doesn't work
Table of contents

Do you always need an email marketing platform like Mailchimp or Active Campaign to send a HTML email? You can actually use Gmail to send them as well. Emails sent directly from Gmail are much more likely to reach primary inboxes than ones sent from an email marketing platform.

However, you can't just copy and paste your email design into Gmail. Even though it might look fine in the draft window, its formatting could become wonky after you send it. Here's how to send a HTML email with Gmail by pasting its code with Inspect console.

This method works in Google Chrome, Firefox and Internet Explorer.

1

Copy the HTML code of the email you want to send with Gmail

You can send the HTML email to yourself with Litmus PutsMail first and view it on a few different email clients (desktop, mobile, app) to make sure the design looks as expected.

Copy the HTML code of the email you want to send
2

In Gmail, click "+ Compose" to compose a new email and type 'Text' in the body

Compose a new email and type 'Text'
3

Highlight "Text", right click and click on 'Inspect' in the dropdown menu

Right click and click on 'Inspect' to open the Inspect console
4

In the Inspect console that pops up, right click on the highlighted blue section and click on "Edit as HTML" in the dropdown menu

Right click on the highlighted section and click on 'Edit as HTML
5

In the textarea that appears, highlight "Text"

6

Paste your email HTML code to replace "Text"

7

Click anywhere outside of the textarea to apply your HTML code

8

Click "x" at the top right corner to close the Inspect console

Now you'll see your HTML email in the compose window

9

If needed, you can directly edit any of the text in the email

Add your subject line and recipient email address and it's ready to send!

10

Here's how a HTML email would look for the recipient.

It looks the same as if you sent it from an email marketing platform!

How your HTML email will look after sending it

You can use a browser extension like Streak to know if your contact opened your email or not. You can also use a tool like Gmass to send your HTML designed email to a list of contacts with names and other details personalized for each recipient.

What are the use cases of sending HTML emails with Gmail? Can't I just use an email marketing platform?

Sometimes, it can be preferable to use Gmail to send a designed email to a small list of contacts because:

·  it looks like an 1-on-1 message from you and not a mass marketing email
·  it's much more likely to reach people's primary inboxes
·  email marketing platforms require you to add an unsubscribe link (for good reasons!) but depending on the purpose of your email, and if you're contacting a handful of people or less, it may not make sense to

Use cases include:

·  sending wedding invites to friends and family
·  sharing information with a small list of customers
·  sending an email to the winner of a contest or giveaway
·  sending investors company updates

How can I send a HTML email with Gmail to a list of contacts and personalize some details like their name?

You can use a mail merge tool like Yet Another Mail Merge or Gmass.

All you have to do is:

1. Create a new spreadsheet on Google Sheets.

2. Add "Email" as the header name of the first column.

3. In this column, add the email address of each contact you'll send a message to on a separate row.

Email addresses added to the first column of the spreadsheet, under the header "Email"

4. For each detail you want to personalize like name or company name, add a header name to a separate column, for example "Name". In each column, add the personalized detail for each contact on the row beside their email address.

In the example, the name for each contact is added beside their email address on each row in the next column, under the header "Names"

5. In the email you're sending, replace each detail you'd like to personalize with a variable that matches the header name of the corresponding column from your spreadsheet. For example the variable {{Name}} if the corresponding header name is "Name".

6. The mail merge tool will populate the variable with the content of the corresponding spreadsheet cell for each contact when it sends the email.

That's it!

Last updated:
Freelance dry spell? How to land paid work fast4 templates
A plant sprouting through a crack in the pavement to represent landing paid work after a dry spell
Money can grow anywhere you water it
Cold emails to slide into someone's inbox5 templates
Penguin sliding on ice to represent sliding into someone's inbox with a cold email
Don't mind me, just sliding into your inbox
Proven cold email templates to get new clients5 templates
Man celebrating with money falling, to represent closing a new client
Make it rain, by proactively reaching out to clients
How to ask for client referrals, without feeling awkward4 templates
A dog looking up with a dopey expression to lightheartedly represent needing a big favor
I'm gonna cut to the chase, I need a big favor