Serverless Contact Form

November 17th, 2022

Summary since the last update:

  • Created a gatsby site. Currently very barebones at miketekin.dev miketekin.gatsbyjs.io (the site is no longer at miketekin.dev. That domain will now be hosting my new project - a site hosted on my own server)

  • Built a serverless contact form (using AWS's Lambda, API Gateway, IAM, and SES) with a honeypot for spam filtering. You can view it at miketekin.dev miketekin.gatsbyjs.io

  • The email address I put up on this site's front page was harvested and has been receiving spam

  • Took down the email address and replaced it with links to my socials and a contact form using google forms

A few days after putting my new email on the front page of this site, I woke up to 7 very obvious spam messages asking me if I needed help with my website.

My new email must have been harvested off my homepage by bots. I wanted to stop it from being harvested and come up with some kind of alternative contact solution before working on anything else.

So, I took the address off the home page and replaced it with links to my socials and a google form. It wasn't an ideal solution because 1) it comes with google branding and looks kind of amateurish and 2) if I was going to have a contact form, I wanted to build it myself. This entire site is a learning exercise for me as well as a portfolio. So, I'm happy to work on anything I can build myself that will help me develop my skills.

I researched alternatives to the Google form and ended up with the following options:

  1. Keep my email address on the front page but hide it from bots by using javascript to load the address in after the rest of the page loads or by embedding it in an image. The email address could also be a throwaway that just forwards all the emails to another address. If it was ever harvested, I could just ditch the throwaway address.

  2. Build my own contact form - hosted on my own server - and include a captcha and/or a honeypot to stop bots from spamming me through the form.

  3. Use some prebuilt or template-based form from some SaaS (like Jotform or Formspree)

  4. Setup my site on a platform like Netlify or WordPress which include add-ons and tools for form-handling

  5. Build a serverless contact form using AWS

Option 1: I want to make it as easy as possible for visitors to this site to send me a message and a contact form directly on the site seemed like the easiest way to do that.

Option 2, 3, 5: This site is hosted on Google sites and is really limited as far as what code I can include and what will run. I can embed code and when I preview it here before inserting it everything looks fine. But as soon as I hit "insert", it creates elements where the styling is off.

Option 4: I felt like using those tools would become a crutch that I would have to keep leaning on.

In the end, I decided I would create another site for my portfolio (at miketekin.dev) because it gave me more control and Gatsby was one of the most popular options.

I had heard a lot about Gatsby and compared it with similar platforms. I found that Gatsby experience was mentioned in a number of job postings in my area. That wasn't the case for Netlify. So, although I had heard better things about Netlify, I decided to go with Gatsby because I wanted experience that was a bit more marketable.

On my Gatsby site, I could have tried out options 2, 3, 4, or 5 since I had a lot more control. But since I didn't want to maintain my own server and wanted to learn about creating a serverless contact form, I decided to build one using AWS.

What I'm considering working on next:

  • Gatsby is still doing much of the work and, because of that, my understanding of everything works together isn't as complete as it could be. I might try to rebuild my site with as few tools as possible.

  • Cloning the look and functionality of this site onto miketekin.dev could help me learn a lot.

  • I might try to work on learning the fundamentals of JS before doing any other project because I feel like my progress on completing this serverless contact form was slow because I'm still new to JS and tried to take a "learn just in time rather than just in case" approach.

  • I think it would be even cooler to have a chatbot on my site and I think that would be a fun project and a solid next step after creating a contact form.