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 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.

Build an email list for your startup with AWS Lambda and Airtable. Credit: sebdeck

Airtable: An easy-to-use database

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.

Using Airtable as our database allows us to easily view and share the email addresses of potential customers.

AWS Lambda: The Python script

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.

handler.py — Copy the code from here: https://carbon.now.sh/PM2J6xrPf0mOChag7Xxp

serverless: Let’s deploy the function!

requirements.txt — Copy the code from here: https://carbon.now.sh/W5BPvwg00oNlzexWV5Ld

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.

serverless.yml — Copy the code from here: https://carbon.now.sh/apEwSIP2BnVAtarNDrpU

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.

Screenshot of my AWS Lambda deployment using the serverless tool.

We can now test our endpoint, either directly with curl or through a tool like Insomnia:

curl request — Copy the code from here: https://carbon.now.sh/kinSRsqkVxpDk38tftNC

If everything went right, you should have a new entry in your Airtable now!

Integration into the Landing Page

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

Excerpt from the HTML page — Copy the code from here: https://carbon.now.sh/JQmRaMBmwG7VYuazPhu9

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!

Excerpt from the JS code — Copy the code from here: https://carbon.now.sh/nIQulsBOcrE3kmCSQ2Bb

Wrapping up

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!

Language technology enthusiast & NLP consultant. Currently building textcloud.co, the first workflow automation platform with text intelligence.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store