Cathy K Web and Design
cathyk web and design

MY BLOG

 
My contact form works again!

TL;DR – My AWS Lightsail Ubuntu 20.04 OS-only instance server would not allow emails to be sent from a PHPMailer/OAuth2 contact form to my Google Workspaces Gmail inbox. Some resources that helped me fix the problem are at the bottom of this post. Bear with me, this is a super nerdy and boring post.

Earlier this year, I moved all my websites from a Hostgator reseller’s account to an AWS Lightsail server as recounted in this earlier post. While I was with Hostgator I’d created the contact form seen here on this website and I was super happy with it. Little did I know that my form was about to break hard upon relocating to the new server and that I would experience a shocking amount of hours and much frustration trying to fix it.

The problem was that my contact form happily took the visitor’s input, and then sent them to the “Success!” screen making them feel that the contact form was actually contacting someone. From there the information just disappeared and never came to me as an email as intended. Troubleshooting was difficult — I wasn’t seeing any debugging errors on my screen or in the error logs. I’ve spent months (on and off) doing all kinds of desperate things — tweaking and retweaking my form PHP code, revoking and reaquiring OAuth credentials, reinstalling my PHPMailer classes, etc. I’ve also been watching videos, reading Stack Exchange posts, and reading web developer’s tutorials. I’ve also done literally hundreds of Google searches.

For the record, I was able to create a working contact form with the WPForms WordPress plugin, but I didn’t want to depend on WordPress plugins for everything. Some websites don’t need to be built with WordPress, I really wanted some solid code that I could use on simpler HTML websites.

In these past few days, I’ve started to realize that it probably wasn’t my own coding errors causing the failure. I began really thinking hard about what must be missing from my new Lightsail Ubuntu server that was present on the Hostgator server. I came upon a Stack Overflow post that mentioned a Postfix program. I watched videos about Postfix and read a few tutorials and eventually tried enough configuration tweaks that, at last, an email miraculously arrived in my inbox from my contact form.

Tonight is New Year’s Eve (now New Year’s day as I’m finishing this post), and I’ve spent yet another whole day working on my contact form problem, but today I was finally able to fix it just a couple of hours before the start of a new year. I’m so happy and relieved, all about a stupid contact form. It is often the little things that make me happiest. 2022 is already looking up! Happy New Year!!!

I must say thank you and give credit to DevAnswers for writing the post that helped me fix my problem. Also Zainab Elsayed at BetterProgramming.pub for help with acquiring an OAuth2 refresh token which is a weird, mysterious thing that is tricky to acquire when just starting out.

Here are some other useful websites and posts I found to solve my server email problems:

My contact form code

My email is handled by Google Workspaces using my own domain, so this email form configuration works with Gmail. I used PHPMailer with OAuth2 which allows sending email more securely and with less chance of the email ending up in a spam folder.

Here’s a nice explanation and instructions about PHPMailer with OAuth2 from phppot.com
https://phppot.com/php/sending-email-using-phpmailer-with-gmail-xoauth2/

Instructions for installing PHPMailer. I used Composer installation instructions for this:
https://github.com/PHPMailer/PHPMailer

Google OAuth2 support is also installed with Composer:
https://github.com/thephpleague/oauth2-google

I’ve just now posted the scripts for the contact form in a Github gist here: https://gist.github.com/cathy-k/225f06b6e5140a47618e2e91854c553d. The gist is way better suited to show code than this blog. My disclaimer is important:

The code provided illustrates a configuration that works for my contact form, and I take no responsibility for its functionality, efficiency, or security. Please use it at your own risk and consult with someone smarter than me regarding the reliability of this code. That said…

The code for the form is contained in a file called ‘contact_form.php’, and I’ve inserted it into my WordPress page with a ‘require’ statement:

<?php require "inc/contact_form.php"; ?>

When using this form on a non-WordPress website, I would just put the code below directly into my HTML/PHP page.

I have removed all of my confidential credentials from ‘contact_form.php’ and implemented a ‘config.php’ to hold that and a couple of other variables. You will need to add your Client ID, Client Secret, Refresh Token, your email address, website URL, etc, to the ‘contact_form.php’, ‘contact.php’, and ‘config.php’, and complete paths to various critical files. Included in the form is a nice little Javascript captcha feature. BTW, I use Bootstrap on most of my websites, so you’ll see some spacing classes which you can ignore if you’d like, but for the form field structure and configuration, it may be helpful to consult the Bootstrap website. I’m using Bootstrap 5.0.

I have used form fields that are likely different from what you may want to use, so modify them as needed.

The ‘contact_form.php’ form action calls the second file provided as well which is called ‘contact.php’.

 

Leave a Comment

Your email address will not be published. Required fields are marked *