Hawk's By Design
HTML Email Example Code

Emails often feel like another world to me.

I mean, c’mon, tables? Really? And just when you think you have your email perfect, you look at it in Outlook and cry.

Well, before you get to all of that HTML fun, and crying, you have to be able to send that email. An email is no good if you can’t send it, right? Well…I guess you could just look at it.

A simple and easy way to send emails is through the combination of Google’s free SMTP server, and a library called PHPMailer. Could you use Google’s SMTP server with the built in PHP mail function? Probably, but PHPMailer is wicked cool and easy to use, which is why I use it in all of my projects.

This setup is based off version 5.2 of PHPMailer. This version and the latest version are not interchangeable.

Before we start, head on over to the repo and give it a download.

The Code

Initializing

require_once('phpMailer/PHPMailerAutoload.php');
$mail = new PHPMailer;

We are going to start off super simple. The first thing you need to do is include or require in the PHPMailer library. I would recommend require, since it is kind of essential to the whole script. The file you want to require is called “PHPMailerAutoload.php”. This swell file gets everything nice and loaded for you, making your job easier.

The next line we create an instance of PHPMailer, and store it in a variable called $mail.

Settings

$mail -> Host = "smtp.google.com";
$mail -> Port = 587;
$mail -> SMTPSecure = "tls";

Now we need to set up some settings before we do anything with the PHPMailer instance. First, we enable SMTP. Then, we want to tell the instance what host we are using, which is the address for Google’s SMTP server.

Using Google’s SMTP server requires it to be secure, so you have to use SSL or TLS. We are going to use TLS. So, we set the port number to “587” and tell the encryption that we are wanting “tls”.

This part is always confusing, so don’t fret too hard. There are a lot of articles out there that discuss TLS/SSL and the different ports. For the sake of simplicity, let’s not get into that here (and because that would make my brain hurt).

Authentication

$mail -> SMTPAuth = true;
$mail -> Username = "youremail@gmail.com";
$mail -> Password = "yourpassword";

You are using a Google server, so you have to authenticate! You can do this with a Gmail account, or if you have one, your GSuite account. The difference is in the amount of emails that you can send. A regular account has a stricter limit than if you are using a GSuite account.

You can read more about the restrictions here.

First, we need to tell PHPMailer that we want to authenticate, so we set that setting to true. The next two are pretty self explanatory, your username is your gmail account and your password is…your password.

From, To, Reply-To, Subject

$mail -> setFrom("youremail@gmail.com", "Your Name");
$mail -> setAddress("emailyouresendingto@anyhost.com");
$mail -> addReplyTo("replytoemail@host.com", "Reply-To Name");
$mail -> Subject = "Your Awesome Subject";

Now we get to set some fun stuff. First, we set what email address and name we want the email to be said it was from. Since we are using Google’s server, this will automatically be overridden if you try to set it to something other than your email. What you can do, however, is set it to other email that are associated with your account.

Next, we set where this email is going, that’s what the “addAddress” does. You can add one, or multiple, up to you. We also add a reply-to, which sets what email will be automatically selected when the recipient replies to the email.

Lastly, we have our subject, which can be set to whatever your heart desires.

The Body

$mail -> isHtml(true);
$mail -> Body = "<table><tr><td>Your Awesome Email Design</td></tr></table>";

We’ve finally made it to the all important part! Yay!

The body is as simple as the subject, it’s just a string that you set. However, if you spent all of your wonderful time building out an HTML email, you’ll want to use it, right? That’s why we set “isHTML” to true. That way, all our fun HTML gets parsed as it should, and your email ends up looking beautiful.

Sending

if($mail -> send()) {
    // Success!
} else {
    // Error - Uh Oh
}

Sending the email is as easy as invoking the send() function. Do that, and the email is on its way. However, you will want to wrap this bad boy in a conditional statement. That way, if it fails, then you can handle it.

Alternatively, you can wrap everything in a try-catch statement, you just have to pass “true” along whenever you initialize PHPMailer.

Google’s Gonna Get Mad

It all works!…Oh. Wait. Crap.

Google sign in blocked notification

Don’t freak out. You will most likely get an email from Google saying that they blocked an app that was trying to log in as you. This happens because Google views your login as a “less secure app”, which is disabled on your account by default.

In order to rectify this, you can navigate to the Less Secure App Access page for Gmail, or follow this helpful post for GSuite.

Once you have that enabled, you should be able to send your email no problem.

Usage

As I mentioned before, the SMTP server does have limits that vary based on your account. However, if you are just a person looking to send emails easily, you shouldn’t worry too much. For me, I like to use this for my personal website contact forms. It’s a free service, and it’s super simple to set up. I know I’m not going to be getting hundreds of emails a month, so it’s fine.

I have this setup running on multiple personal sites and haven’t had any problems thus far. On average, I probably get around 20 – 30 emails a month via forms. So nothing too crazy.

Conclusion

I really hope this helps anyone out there that may be a bit intimidated by email. It can be crazy, but this is a simple solution that can help lots of people out. If you are having issues, try to keep cool and run through the debugging settings of PHPMailer. Read the errors and try to diagnose where the hold up could be.

I may not be able to solve your problem, but I’d sure help you out if I can. Shoot me a message and I’ll see if I can help you out.

Thanks for reading!

Some more articles for you

Coding

July 8, 2022

Line Clamp, I Love You

Multi-line truncating has always been rough. But, what if I told you, you could do it with pure CSS? Yes! It's possible!

View post

Coding

January 18, 2019

Position Sticky, Oh How I Love You

Position sticky is one of those CSS features that you don't know you need until you see it, and use it for the first time.

View post