How to create HTML email templates for Gmail

Nowadays, more than 4 million emails are sent every second, and 30% of this traffic is sent via Gmail. It’s a challenge to make your email visible in this flow of information. Luckily, integrating HTML can give your messages a professional polish and help capture the recipients’ attention.

In the past, there was a built-in HTML editor in Gmail, but over the course of time it was replaced by the code-free WYSIWYG (What You See Is What You Get) editor. Even though the new editor is simpler in composing and editing emails, nothing really beats good-old HTML. With HTML you can significantly expand the functionality of your editor, transforming plain text into aesthetic newsletters, targeted sales promotions, custom emails, and more. But how to apply HTML in Gmail? Let me show you how.

Different ways to create Gmail HTML email templates

In this chapter, I’ll describe several ways to generate HTML emails from built-in options to power-user tricks. For some of them comprehensive HTML knowledge is required, and for others not, but regardless of your choice each method will help you give your messages some flair ✨.

Way 1: Copy and paste HTML code

Copy-pasting code into your email sounds easy, but here’s the deal: if you just copy and paste the code, your email won’t magically transform into a perfectly structured message with fancy buttons and cool pictures. Try to do so, and you’ll see that it still looks like code.
Copy-pasting raw HTML will look like a code in the email.

Here’s how to make this work:

Compose your code in any handy HTML editor or export it from somewhere. Then save the code as a .html file.
Right-click the file and select Open with to view it in your chosen browser.

Your email content will appear in a new tab.

Note. If anything looks off, review the code and confirm that the file was saved in the correct format.
Select and copy the page contents.
Open Gmail, click Compose, and paste the copied contents into the new message window.
Your HTML email is almost ready. Just add recipients, write a subject, and click Send. Or save it in Drafts for future email campaigns.

Tip. Send a test email to yourself or someone from your team before bulk sending to check its final appearance.
Additionally, you can save your draft as a template. Click the three dots in the tools panel, hover over Templates > Save draft as template, and select Save as new template.

Tip. Don’t forget to enable Templates beforehand. Read this article to understand the process.

Way 2: Edit layout templates

Working with this method, you’ll be dealing with built-in Gmail layouts. There are not many of them, and you will be limited by the existing editor features, but you will get a custom HTML design without any advanced HTML knowledge.

Note that this feature is available only for personal accounts with Google Workspace Individual subscription (not free personal accounts) and for most Google Workspace plans. Let’s examine it closely (or move to the next chapter, if you don’t have a suitable subscription):

Open your Google email and click Compose.
Choose the Select a layout option in the toolbar.
A pop-up window with default layouts will appear. Select the most suitable layout and click Edit layout.
Once the editor opens, click on any section you want to modify, and adjust as needed. You can also delete unnecessary sections or insert new ones.

It’s also possible to go to My layouts and create your own layout from scratch using structural blocks. Moreover, you can explore more options by clicking Default styling in the lower left corner.

In the Default styling section, you can modify your logo, colors, fonts, footer details, and links.

Tip. Don’t forget to update any existing links in the layout.
When you are finished making changes, click Insert.
Finalize your email with a subject line and recipients. Your layout will be saved in the My layouts tab to have it on hand.

Way 3: Use developer tools

Another option to create HTML email templates for Gmail is to work within Chrome’s Developer Tools. It’s an effective method, but frankly speaking, not for beginners. But you never know what you can do till you try 💪.

As with the first way, to work smoothly you need to prepare your HTML code beforehand.
Open a compose window in Gmail, right-click within it, and choose the Inspect option.
Chrome’s Developer Tools open at the side. Click the arrow in the top left corner to select an element in the page and hover over your email body.
The div element with the compose window code will be highlighted. Right-click it and select Edit as HTML.
Replace the content of the element with your HTML code.

Note. Don’t paste the entire HTML document, you just need the part between <body> </body> tags. Copy your code and wrap it in <div> </div> instead of <body> </body>. Your code should only contain Gmail-supported tags.
Click outside the Chrome’s Developer Tools window and close it. Your HTML email will appear in your draft.

Way 4: Install a Chrome extension

Let’s switch to the easiest option. Even though there’s no built-in HTML editor in Gmail, you can get it with special add-ons like Shared Email Templates. With it, you can easily create, edit and manage your HTML emails. Moreover, you’ll be able to save them as templates, share them with your team, control access levels, add signatures (even HTML ones) and so much more. You’ll see how convenient email handling could be:

Install the extension from the Chrome Web Store.

Tip. Click Add to Chrome and follow the on-screen steps to get started.
Go to Gmail and run Shared Email Templates. To do so, just click its icon to the right of your browser address bar. If you don't see the app icon, click Extensions first and find Shared Email Templates in the list of your Chrome tools.
Pick the folder where your template should be and click the three dots next to its name. Then select New template. (Or push the New template button at the bottom of the sidebar).
In the template editor, click View HTML.
The place for your HTML code will appear. You can write it right here or copy-paste the code from your preferred editor, click OK, and save the template.
That’s really all it takes! Save it, and your perfect HTML email template is ready 😉. Preview your content directly in the extension's sidebar before adding it to an email.

Tip. Click Edit in browser for a better view.
To use your template, select it and click Insert. Its whole content will pop into your new email.

All your created templates will be saved in a centralized, organized, and easily searchable template hub.

Tip. Additionally, you'll get a collection of professionally designed HTML-based signature templates to add the final touch to your emails.

Struggling with HTML but comfortable using Docs? We have another cool tool for you: Easy Mail Merge. With this add-on, you can prepare and send perfectly designed, personalized emails straight from Google Docs. It’s really a great no-code solution, let me show you:

Install the add-on from the Google Workspace Marketplace.
Prepare a mailing list in Google Sheets. Write down recipient email addresses and other info that will help you personalize emails for each contact.
Create your awesome email template in Google Docs. Use special placeholders from the connected Google Sheets data in your emails to ensure each message is tailored to the recipient.
Run the add-on. Go to Extensions > Easy Mail Merge > Email Merge (if you have a standalone extension) or Extensions > Doc Tools > Start (if you have this tool as part of the Doc Tools collection).
Click Add list from spreadsheet, select the mailing list in the pop-up window and click Add to connect the mailing list to your template.
Pick or enter a column from your mailing list that contains the email addresses of your future recipients. Write a subject line (if it’s not tailored for each recipient in the mailing list). You can also send this document as a PDF file, attach other files, and track opened emails.
Click the white Test button at the bottom to send a sample email to your inbox and see how it looks. If everything is okay, click Send to start your email campaign.

Note. The add-on automatically adds two columns to your mailing list to track the status and details of each sent email.

Best practices for Gmail HTML

For best results, I want to share with you some tips on creating and sending HTML emails:

Follow legal obligations. Keep in mind that there are important anti-spam rules. To stay on the right side of the law, check out legal guidelines for the USA and EU.
Host your images online with public access. When creating HTML email templates, all the images should be publicly available, otherwise they go missing on the recipient's end. Or you can use Shared Email Templates to be certain your email will stay intact.
Don’t use external CSS. So that your emails appear exactly as designed on any device, use inline CSS instead of external stylesheets.
Avoid custom fonts. As with styles, if you want your design to look the same in every inbox, you should stick to email-safe fonts like Arial or Verdana. Otherwise, your custom fonts would be replaced with Gmail default fonts at the recipients’ end.
Simplify your code. Fancy code often breaks in different email clients, and too much HTML with little text might trigger spam filters.
Use only supported HTML tags. Gmail doesn’t flag unsupported HTML tags with an error message. It will simply delete the code and your fancy button or cute layout will just disappear or be changed.
Send a test email. Before you start your campaign, send a test email to yourself or a team member. This way you can recheck the message content. Also, make sure it’s actually delivered and doesn't get lost in the spam.

If the tech gods are kind, this article will help you create perfect HTML emails to win your recipients’ hearts 🧡.