Serverless - I’d argue that it’s not really serverless, but to the end-user it might as well be. While Serverless is useful to me, it also offers powerful oppurtunities for my less tech-saavy clients. Serverless allows you to do things that typically require a server. Basically, AWS and Cloud Formation handle setting up a runtime environment where you can deploy models and then sync it to an AWS Lambda function (e.g. input/output). Serverless, AFAIK, is tightly coupled to AWS services, and allows you to do all sorts of funky things. Today, I’ll show you how to build a contact form on your static site. Here is a SNEAK PREVIEW of the form. Feel free to reach out!
My business site is powered by Jekyll and runs on Github pages - it’s a completely static site. I thought it was about time to develop a simple contact form, rather than have visitors click those pesky email links so looked into my options. I only had two requirements:
- I did NOT want to pay for a third party js library
- I wanted to integrate with Convertkit
For some weird reason, the original repo contact form was sending an email to the submitter, which doesn’t make too much sense. I wanted it to be sent to me, so I could, you know, get back in touch. So the repo I created adjusts for that.
The setup is suprisingly easy. It took me the morning, but I have a fully functioning contact form that triggers an email to my inbox when someone reaches out AND adds a subscriber to my Convertkit account. Pretty cool.
Here’s how to get started:
Next, you should head to your AWS console and setup an Administrator with CLI access (search for the AdministratorAccess Policy). That policy should look like this:
Once setup, grab the credentials in the csv file and add to command line prompt below:
Next, you’ll want to add a secrets.json file where you can pass along some of your secret info. You’ll also want to add a requirements.txt file. Both of these files will sit in the root of the project and look like the following:
That SENDER_EMAIL key should be setup in AWS under Simple Email Service (SES, Go to: Under Identity Management => Email Addresses). Add the email address and follow the steps to get it verified. It’s like confirming your email for a subscription to a newsletter.
Since I’ve added the requests library to our handler.py file to make a POST request to Convertkit we need to tell Serverless that it should be packaged and brought into our environment. You’ll want to add that library to your requirements file below.
Finally, you can deploy:
Once it finishes, you can see two Lambda functions (ListLambdaFunction and SendMailLambdaFunction) on AWS. ListLambdaFunction is simply a GET request that retrieves all of you contacts and SendMailLambdaFunction is a function that allows you to add an entry to DynamoDB and triggers the SES service to send you an email when the contact form is submitted. I also sneak in a function that adds the contact to convertkit in the handler.py script. Easy enough huh?
Here’s the form I’m using. Make sure the id and name of the inputs match the script.js file, linked to below.
You’ll need to link to the scripts.js file located HERE.
That’s it. Setup didn’t take me long and I now have a nice, cheap, serverless contact form. Was fun getting to know serverless and hope to use it more in the future!