1

I am successfully sending the email to the user using the Gomail library. I have used a separate template for the HTML file and converted the HTML code into text using the html2text library for it but the problem is that it is showing the text only but the CSS style is not applied to it.

How to apply the CSS also while sending an email?

main.go

func Verify(toEmail, accountName string) {
    mail := gomail.NewMessage()
    myEmail := middleware.LoadEnvVariable("APP_EMAIL")
    myPassword := middleware.LoadEnvVariable("APP_PASSWORD")
    body := new(bytes.Buffer)
    t, err := template.ParseFiles("cmd/template.html")
    if err != nil {
        log.Fatal(err)
    }
    getAccountInfo := AccountInfo{
        GetAccountName: accountName,
    }

    if err := t.Execute(body, getAccountInfo); err != nil {
        log.Fatal("Could not execute the template", err)
    }
    mail.SetHeader("From", myEmail)
    mail.SetHeader("To", toEmail)
    mail.SetHeader("Reply-To", myEmail)
    mail.SetHeader("Subject", "Confirm your email address")
    mail.SetBody("text/html", html2text.HTML2Text(body.String()))
    a := gomail.NewDialer("smtp.gmail.com", 587, myEmail, myPassword)
    if err := a.DialAndSend(mail); err != nil {
        log.Fatal(err)
    }
}

template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .button-style{
            background-color:#008CBA; 
            border-color:#008CBA; 
            border-radius: 4px; 
            color:white; 
            height: 50px; 
            width: 300px;
        }
    </style>
</head>
<body>
    <center><h1>We're glad you're here, {{.GetAccountName}}</h1></center>
    <center>We just want to confirm it's you.<br><br></center>
    <center>
        <button class="button-style">
            Click to confirm your email address
        </button>
    <center>
    <center><br>If you didn't create a proctl account, just delete this email.</center>
</body>
</html>
Kaifah Habibi
  • 145
  • 6

1 Answers1

1

According to https://en.wikipedia.org/wiki/HTML_email, the <head> tag is not well supported:

Email software that complies with RFC 2822 is only required to support plain text, not HTML formatting. Sending HTML formatted emails can therefore lead to problems if the recipient's email client does not support it. In the worst case, the recipient will see the HTML code instead of the intended message.

Among those email clients that do support HTML, some do not render it consistently with W3C specifications, and many HTML emails are not compliant either, which may cause rendering or delivery problems.

In particular, the <head> tag, which is used to house CSS style rules for an entire HTML document, is not well supported, sometimes stripped entirely, causing in-line style declarations to be the de facto standard, even though in-line style declarations are inefficient and fail to take good advantage of HTML's ability to separate style from content.

So you should write the email content with in-line style like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <center><h1>We're glad you're here, {{.GetAccountName}}</h1></center>
    <center>We just want to confirm it's you.<br><br></center>
    <center>
        <button style="background-color:#008CBA; border-color:#008CBA; border-radius: 4px; color:white; height: 50px; width: 300px;">
            Click to confirm your email address
        </button>
    <center>
    <center><br>If you didn't create a proctl account, just delete this email.</center>
</body>
</html>
Zeke Lu
  • 6,349
  • 1
  • 17
  • 23