Developer Stories Tutorial: Create and Test Your HTML Email Template

Tutorial: Create and Test Your HTML Email Template

Hello! I would like to share to all of you about how to create HTML Email template and test it. For example, we can include image or table inside our email content to be more interactive. Let me show a few examples:

Example: Email template from Gcalendar, Traveloka, and AWS

How to Create Email Verification with HTML

Let’s get started! We will create a simple file HTML template for Email Verification after user finished the registration, so that user can confirm their email address. The email will show the logo, user name, welcome message, link for verification, and copyright just like image below.

Example: Email Verification Template

I have already uploaded the template file in my GitHub, if you need reference.

Tips when You Create the Template

  1. If you want to insert image, use link to load it since base64 image is not supported yet.
  2. For more organized look, you can use table. Table is good for your template to make it more responsive.
  3. You can handle the screen size (mobile/tablet/laptop) in your CSS style and load your template in mobile mode to make sure that your template is still in a good form.
  4. Last but not least, you can try to test your template by using HTML Inserter Chrome Extension. Try to send new email from Gmail with HTML Inserter and paste your HTML template. See the result in mobile too to see the difference. This extension helps a lot before you finally set the template and try to test it from your server app.

HTML Inserter for Gmail from Google Chrome Extension

Thanks for reading and I hope this mini tutorial would be helpful for someone out there because sharing is caring! :)


Inne Prinusantari, a back-end developer then, now a product owner at GITS Indonesia, had herself challenged on used new framework right away and in big scope enterprise app. She successfully overcame it. In the future, she sets eyes on managing developers.


To be a good developer it is a need to have coding skill. But also, other things as well. What are those other things? Find out at this Insight page.


LEAVE A REPLY

Please enter your comment!
Please enter your name here

More articles

Latest article

Antara Oracle Cloud vs Google Cloud, Mana yang Paling Sesuai untuk Kebutuhan Perusahaan Anda?

Cloud computing merupakan platform penting yang menawarkan berbagai keuntungan untuk perusahaan yang menggunakannya. Dua platform cloud computing yang bersaing untuk mendapatkan perhatian...

IBM Cloud vs Google Cloud, Mana yang Lebih Sesuai untuk Perusahaan Anda?

Dari antara banyak penyedia layanan cloud computing, IBM Cloud vs Google Cloud adalah dua penyedia yang cukup terkenal. Kedua perusahaan tersebut terus...

Perbandingan Alibaba Cloud vs Google Cloud, Mana yang Lebih Bagus?

Layanan cloud computing sudah menjadi salah satu pilihan yang sangat menonjol saat ini. diantara sekian banyak layanan cloud...

Membandingkan Azure Cloud vs Google Cloud, Lebih Baik yang Mana?

Layanan cloud computing atau komputasi awan seperti Azure Cloud vs Google Cloud bukan sekedar memungkinkan para penggunanya untuk...

Antara AWS vs Google Cloud, Mana yang Lebih Bagus?

Komputasi awan atau cloud computing selama ini didominasi oleh raksasa-raksasa terkenal, seperti AWS vs Google Cloud. Komputasi awan merupakan metode penyimpanan dan...