• contact@ndubuisidev.com
  • +2348104292457
  • 31 Aug, 2025
  • Admin

๐Ÿš€ Serverless Contact Form with AWS

๐Ÿ“Œ Project Overview

I built a Serverless Contact Form using AWS services. The form allows users to submit their name, email, and message through a simple HTML frontend. The backend is fully serverless, using API Gateway, Lambda, and Amazon SES to process and send form submissions directly to my inbox, while optionally storing them in DynamoDB.

This solution is scalable, cost-efficient, and requires no traditional servers.

๐Ÿ”น 1. Frontend (HTML + CSS + JS)

I created a responsive HTML form styled with CSS. When a user submits, JavaScript captures the input and sends it as a POST request to an API Gateway endpoint.

Check Me GitHub For Code: https://github.com/flame225/How-I-Made-a-Serverless-Contact-Form-with-AWS/tree/main

โœ… Hosted on Amazon S3 + CloudFront for global access.

๐Ÿ”น 2. API Gateway

  • Created an HTTP API in API Gateway.

  • Added a POST /submit route.

  • Integrated the route with my Lambda function.

  • Enabled CORS so the frontend can communicate securely.

๐Ÿ”น 3. AWS Lambda Function

The Lambda function parses the form input and sends an email using Amazon SES.

Check Me GitHub For Code: https://github.com/flame225/How-I-Made-a-Serverless-Contact-Form-with-AWS/tree/main

This ensures I donโ€™t lose messages even if an email fails.

๐Ÿ”น 6. Security

  • Enabled CORS in API Gateway.

  • Added IAM permissions so only my Lambda can call SES/DynamoDB.

  • Can extend with reCAPTCHA for spam protection.

๐Ÿ”น 7. Deployment

  • Frontend: Hosted static HTML/CSS/JS in Amazon S3 + CloudFront.

  • Backend: API Gateway + Lambda + SES (and DynamoDB).

โœ… Final Result

  • Users fill out the form.

  • API Gateway sends the request to Lambda.

  • Lambda uses SES to email me the submission.

  • Messages are optionally stored in DynamoDB.

  • Entire solution runs serverless with minimal cost.

๐Ÿ“ธ Architecture Diagram

[User] โ†’ (HTML Form in S3/CloudFront) โ†’ API Gateway โ†’ Lambda โ†’ SES (Email) + DynamoDB (Storage)

๐Ÿ’ก Why This Project?

  • Scalable โ†’ Handles any number of submissions.

  • Cost-efficient โ†’ Pay only for usage (Lambda, SES, API Gateway).

  • No servers โ†’ Fully managed by AWS.

  • Practical use case โ†’ Can be deployed for websites, portfolios, and apps.

ย 

Share This

Comments