Skip to main content

How I Built a Serverless Contact Form for Free

Architecture diagram showing API Gateway triggering a Lambda function.
The core components of our serverless backend.

Every portfolio needs a contact form, but hosting a traditional backend server just for that can be costly and complex. The modern solution? Go serverless. In this tutorial, I'll walk you through the exact process I used to create a secure, scalable, and—thanks to the AWS Free Tier—completely free backend for a contact form.

The Goal: A Simple, Secure, and Free Backend

Our objective is to create an endpoint that our frontend contact form can send data to. This endpoint will then process the data and send me an email notification. We want to do this without managing any servers and without paying a single rupee for typical traffic levels.

The Toolkit: Our AWS Services

We only need three core AWS services to make this happen, all of which have a generous free tier:

  • AWS Lambda: This is our serverless compute service. We will write a small function (in Python, in my case) that will contain the logic to process the form data. The function only runs when it's called, and we only pay for the milliseconds it runs.
  • Amazon API Gateway: This service allows us to create a secure, public-facing HTTP endpoint (a URL). When our frontend sends data to this URL, API Gateway will trigger our Lambda function.
  • Amazon Simple Email Service (SES): A highly reliable email service that our Lambda function will use to send the actual notification email to my inbox.

Step 1: The Lambda Function - Our "Brain"

The Lambda function is the heart of the operation. It's a self-contained piece of code that does one thing: it receives data, formats it, and sends an email.

I wrote a simple Python function using the `boto3` AWS SDK. It parses the incoming JSON data from the form (name, email, message), creates a nicely formatted HTML email body, and then uses the SES `send_email` command to dispatch it. A key part of this step is setting up the correct IAM Role for the Lambda function, giving it *only* the permission it needs to send emails via SES. This is a critical security best practice.

Step 2: The API Gateway - Our "Front Door"

Next, I created a new REST API in API Gateway. I configured a `/contact` resource with a `POST` method. The crucial step here is the integration: I configured this `POST` method to have a "Lambda Function" integration type and pointed it directly to the function I created in Step 1. This creates the connection: a `POST` request to our new URL will automatically invoke the Lambda function and pass along the request body.

Step 3: The Frontend - Connecting to the Endpoint

With the backend complete, the final step was updating my portfolio's JavaScript. The contact form's `submit` event listener was modified. Instead of a standard form submission, it now uses the `fetch()` API to make an asynchronous `POST` request to the new API Gateway endpoint URL. The form data is bundled into a JSON object and sent in the request body. The script then waits for a response from the API to show a "Success" or "Error" message to the user.

Conclusion: The Power of Serverless

In just a few hours, I had a production-ready, infinitely scalable, and secure backend for my contact form. The best part? The AWS Free Tier for Lambda, API Gateway, and SES is so generous that this solution will likely remain completely free forever for a personal portfolio's traffic levels. It's a powerful demonstration of how cloud-native, serverless architecture can solve real-world problems in an incredibly efficient and cost-effective way.