Project 1 - AWS Serverless Contact Form

Step 1: Design the Contact Form

Create an HTML page with a form containing fields for name, email, and message and include "Save" and "View Messages" controls.
Add JavaScript that sends a POST request to save contact details and a GET request to retrieve messages.
Place a screenshot or wireframe showing the form and UI interaction.
Include Name, Email, and Message fields.
Use Bootstrap for responsive design.
Add form validation and accessibility labels.

Step 2: Create DynamoDB Table

Step 3: Write Lambda Function

Log in to AWS Console & open API Gateway.

Create a new REST API while creating lambda post and get attach role with permissions eg : DynamoDB full access for lambda to read and write.

POST Lambda — receives form data and stores it in DynamoDB with a unique ID .

GET Lambda — retrieves saved contact entries from DynamoDB.

Enable CORS for frontend access and assign the Lambda execution role the necessary DynamoDB permissions and test using sample payloads.

Deploy API to a stage (e.g, prod).

GET Lambda IMAGE Lambda Function Screenshot

POST Lambda IMAGE Lambda Function Screenshot

Step 4: Set Up API Gateway

Log in to AWS Console & open API Gateway.
Create a new REST API.
Create an HTTP API in API Gateway.
Create two routes:POST /contacts → POST Lambda.
GET /contacts → GET Lambda.
Enable CORS for your frontend origin (or * for testing), deploy the API, and copy the invoke URL(s)and past it in JavaScript api url point.

Step 5: Deploy Frontend to S3

Create an S3 bucket (globally unique name).
Enable static website hosting in the bucket properties.
Configure caching, HTTPS, and (optionally) an origin access identity.
Use the CloudFront domain name as the public URL for the app (or map a custom domain).

Step 6: Deploy Frontend to S3 + CloudFront

Step 7: (Optional) Configure a Custom Domain with Route 53

Project 1: Serverless Contact Form