Example contact form

A template for creating a PHP contact form using the Gmail API with a Google email account

A tale of contact forms

The first PHPMailer website contact form I made a few years ago took sooo many hours. I worked on it during all my free hours on weekends and evenings for months. The first time that form successfully sent an email back to me I was elated. It was beautiful man.

Then I changed hosting servers. Everything on the new server looked good except the contact form was broken. More hours. A small program (Postfix) was missing from my new server configuration.

Fast forward about three years and my contact form is broken again. This time it appears to be changes in Google's OAuth2 requirements for SMTP authentication. But now I have ChatGPT. She's usually very helpful for problems like this but hours into following her instructions, it's still broken. I'm frustrated.

I ask her if there's a completely new approach after trying to fix PHPMailer and also trying NodeMailer.

[Hundreds of lines into this chat] I said:
Now why does Postman successfully send emails but my server won't?

ChatGPT said:
Short Answer: Postman can send Gmail messages using the Gmail API, but your PHPMailer code is using SMTP, which is a totally different service — and SMTP currently only accepts the full https://mail.google.com/scope.

I said:
So what's involved in using the Gmail API approach?

ChatGPT said:
Great question — switching from SMTP to the Gmail API directly is a valid and secure alternative, especially when Google’s SMTP + OAuth2 + scope rules get frustrating.

Well, damn. Let's do that then. This webpage is all about how that works.

A word about ChatGPT

Some warn that relying too much on a chatbot means you’re not really learning. And famously, ChatGPT doesn’t always get it right. Sometimes it uses outdated information, or forgets information you've told it. If you use it long enough, you will waste hours trying things that don’t/won't work, and fixing things that the Chatbot cheerfully helped you screw up.

So here’s my advice. Read what it tells you. Be skeptical and challenge it. You'll find it apolgizing for telling you wrong stuff, but overall, it's pretty great at working out solutions for your technical problems. The best things it does for me is to decipher errors, and to type tedious code I ask for. This saves hours of time.

Why people like WordPress

WordPress users know that you really don't need to manually create a contact form. There's some great plugins like WPForms and Contact Form 7 that make it easy-ish (there's some configuration that I'd consider intermediate difficulty). It may surprise some that my first form I described above was on a WordPress site. I can't remember why I was so determined to make one from scratch, but I was, and my own form did turn out pretty cool visually and functionally (when it's not broken). Of the websites I've created in the past ten years, about 80% are in WordPress. It offers so many great plugins developed by developers who actually know how to develop, and that allows designers to offer features that a client may request.

Contact form components

The main technologies used in this contact form are:

• PHP language
• Gmail API
• OAuth2 authorization
• Google reCAPTCHA
• Composer

Optional layout and styling tools used in this page:

• Bootstrap
• Sass
• Adobe Fonts (Typekit)
• AOS (Animate on Scroll)
• Font Awesome

All of the above are loaded with the code provided, except Adobe Fonts and Font Awesome because I have paid subscriptions. You can strip those other scripts and styles out if you'd like.

Even when I try to go minimalist and ditch the design features like Bootstrap and Sass, I always go crawling back. I'm so used to them and they make things pretty, but they are optional.

Anti-spam additives

This contact form has a few extra features designed to block spam and bad submissions:

• Honeypot field: A hidden field that only bots will fill out. If it’s filled in, the form errors out.
• Submission timing check: If the form is submitted too quickly (bots type faster than humans), it error out.
• Non-standard character filtering: Submissions with unsupported or foreign-language characters will be rejected. Not for everyone - consider your target audience.
• No URLs allowed: If someone tries to include a link, the form errors out.
• Sender gets a copy: The sender receives a copy of their submission — and if that email bounces, the email address entered was fake.

These features — along with reCAPTCHA — nearly do away with spam. Any spam that does get through was entered by human hands.

A Word on OAuth2

The most daunting part of this setup is the OAuth2 configuration. Thankfully, there are still good tutorials out there. The one I used years ago here (which requires a Medium account now) still works, though the appearance of the Google Cloud screens may have changed. You can skip the NodeMailer-specific parts if you're sticking with PHP like I did, or give NodeMailer a try if it sounds good to you.

This tutorial provides step-by-step instructions on how to create a project in the Google Cloud Console, creating OAuth2 credentials and then using the OAuth 2.0 Playground to acquire a refresh token at https://developers.google.com/oauthplayground. After that you can plug those credentials into the provided config.php file, and you're on your way to a working contact form. There are plenty of opportunities to blow it on these steps, but perservere and it should pay off.

Final Thoughts

I vividly remember not knowing anything about the technologies I've mentioned. The levels of mysterious gobbletygook felt like a cruel joke. I would have appreciated a working example like this, along with a little AI chatbot. I hope the files in this Gist may help someone achieve email form Nirvana.

---

Give a million monkeys a million years, and they’ll eventually write Shakespeare, but probably not a working contact form.

---