Goodbye PHP & Mailchimp: Build a simple Email List with Airtable and Lambda
When I created a landing page for my current startup textcloud.co, I wanted users to leave their email address in case they are interested in our product.
However, all existing methods would be either too complicated to set up (e.g. Mailchimp), required changes in our stack (e.g. a PHP backend), or would force the user to leave our page (e.g. Typeform). We found that an AWS Lambda function is the perfect target for a simple HTML form, especially if paired with Airtable as a database. If you’re a bit tech-savvy and want to add a dead-simple backend to your static page or single page application, this guide is for you!
In this article you’ll learn…
- … how Airtable’s REST API makes it the perfect database for small projects.
- … how to write a simple AWS Lambda function in Python and how to deploy it.
- … how to integrate it into a static HTML page with a bit of Javascript.
If you already have a bit of experience with AWS Lambda and know your way around HTML & JS, you can expect to get your solution up-and-running in ~30min.
Airtable: An easy-to-use database
Before we dive into the actual code of the backend, we have to set up a database to store the email addresses in. I love Airtable for this use-case because it gives us an incredibly easy interface, it’s free for the first 1000 rows, and most importantly: We can easily view and share the data.
After logging in to Airtable, create a new “Base” from scratch in a workspace of your choice and add a new email field with the name “Email” to it. I also added a “Created time” field which automatically holds the timestamp of when a new row is created.
Because we later want to add data to the spreadsheet, remember the name of the sheet (here: “Emails”) and how you named the field (“Email”). Additionally, we need the id of the table and an api key to modify it. You can get the id from https://airtable.com/api and the api key from your account page https://airtable.com/account.
AWS Lambda: The Python script
Now let’s go through the heart of this little project: The AWS Lambda function which handles the request and updates the database. When the Lambda function is executed, the newsletter function will be called (more on this later). It has the two required arguments event and context, which are filled by AWS automatically and contain (among others) the body of the POST request.
Since the body is application/x-www-form-urlencoded , we have to decode the content in lines 11 to 14 and turn it into an easy-to-use dictionary. Next, we make a request to the Airtable API in lines 16 to 28 to create a new row in the database. Eventually, we return the response from the Airtable API call. That's mostly for debugging purposes, but it also doesn't expose any confidential information, so there's no harm to leave it in.
You can just copy+paste this code and name the file handler.py. The only modifications you might want to make are in line 23: "Email" refers to the name of the field in the Airtable sheet, while "EMAIL" originates from the input form on our website.
serverless: Let’s deploy the function!
First, we need to specify what additional packages our script needs. In this case, it’s only the requests package, so we create a requirements.txt file with the context requests==2.23.0.
Next, install serverless, an awesome tool to easily deploy AWS Lambda functions. You can find instructions for it here.
Afterward, we need to install a plugin for serverless that allows us to deploy Python functions. Simply run sls plugin install -n serverless-python-requirements in the same folder as the handler.py.
Finally, create a configuration file for serverless: serverless.yml.
Fill in your Airtable credentials in the environment section and you’re good to go.
Now, run serverless deploy and wait for a result similar to the following. Note: I'm deploying two functions for different languages, so don't let the additional endpoint confuse you.
We can now test our endpoint, either directly with curl or through a tool like Insomnia:
If everything went right, you should have a new entry in your Airtable now!
Integration into the Landing Page
Now that our backend is working, we’ll have to integrate it into our website.
Here’s a snippet of a form for collecting email addresses. Note the ids of the form itself and the h2 before. We'll use it to show the user a success message. The URL of the lambda function is defined in the action field an the method should be a post
The last bit needed is to intercept the form submission to use Javascript instead. That allows us to make sure we stay on the same page and can show a success message after the Lambda function ran successfully. Feel free to modify this to match your own page!
Wrapping up
That’s it! What I really love about this method is that you don’t need any PHP backend or external services to integrate simple forms into your website. This guide can easily be extended to add a contact form to your page, for example by using AWS SNS to send emails to the website owner.
But be aware that Airtable has a cap of 1000 rows in its free plan, so if you’re expecting a lot of traffic, maybe a “real” database or Google Sheets would make more sense. It might also make sense to add a Captcha field to the form to prevent bots from entering false data. Remember to always validate your email list before sending out your first mails!
And finally some advertisement: If you want to see the form in action and you’re interested in how workflow automation and text-processing come together to make your business smarter, check out my startup’s page at textcloud.co!
