Creating a Serverless Contact Form using AWS API Gateway and Lambda

Follow the Project_Documentation.pdf to view the full Documentation

- /
  	- website/
   		 - index.html
    		- style.css
   		 - script.js
  	- lambda/
    		- index.js
   		- package.json

Create the static website with the HTML form. Write JavaScript code to handle form submission and make an HTTP POST request to the API Gateway endpoint.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Contact Form</h1>
    <form id="contact-form">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <label for="subject">Subject:</label>
      <input type="text" id="subject" name="subject" required>

      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="5" required></textarea>

      <button type="submit">Submit</button>
    </form>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

style.css

.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
  }
  
  form label {
    display: block;
    margin-bottom: 10px;
  }
  
  form input,
  form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
  }
  
  form button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  form button:hover {
    background-color: #0069d9;
  }

script.js

document.getElementById('contact-form').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent form submission
  // Validate form inputs
  var name = document.getElementById('name').value.trim();
  var email = document.getElementById('email').value.trim();
  var subject = document.getElementById('subject').value.trim();
  var message = document.getElementById('message').value.trim();
  // Email validation using a regular expression
  var emailRegex = /^\S+@\S+\.\S+$/;
  if (!name || !email || !subject || !message || !emailRegex.test(email)) {
    alert('Please fill in all fields with valid inputs.');
    return;
  }
  // Construct the form data
  var formData = {
    name: name,
    email: email,
    subject: subject,
    message: message
  };
  // Perform form submission
  submitForm(formData);
});
function submitForm(formData) {
  // Make an API request to the backend (API Gateway) for form submission
  fetch('your-api-gateway-url', { // URL that represents the backend API endpoint to which the form data is going to be sent
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
  .then(function(response) {
    if (response.ok) {
      // Redirect to the thank you page
      window.location.href = 'thank-you.html';
    } else {
      throw new Error('Form submission failed.');
    }
  })
  .catch(function(error) {
    console.error(error);
    alert('Form submission failed. Please try again later.');
  });
}

thank-yo.html

<!DOCTYPE html>
<html>
<head>
  <title>Thank You</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Thank You!</h1>
    <p>Your message has been submitted successfully.</p>
  </div>
</body>
</html>

The structure will be this :

Activity 1 : Create a Lambda function

Create another folder in your system named as lambda.

index.js

const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();
const { v4: uuidv4 } = require('uuid');

exports.handler = async (event) => {
  try {
    console.log('Raw input data:', event); // Add this line to log the raw input data

    const formData = {
      name: event.name,
      email: event.email,
      subject: event.subject,
      message: event.message,
    };

    const item = {
      SubmissionId: generateUUID(), // Generate a UUID
      ...formData, // Use the form data as attributes
    };

    // Store the form data in DynamoDB
    await storeFormData(item);

    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'Form submitted successfully' }),
    };
  } catch (error) {
    console.error(error);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Error submitting the form' }),
    };
  }
};
async function storeFormData(item) {
  const params = {
    TableName: 'ContactFormEntries',
    Item: item,
  };
  await dynamodb.put(params).promise();
}
function generateUUID() {
  return uuidv4();
}

package.json

{
    "name": "serverless-contact-form",
    "version": "1.0.0",
    "description": "Lambda function for handling the serverless contact form",
    "main": "index.js",
    "dependencies": {
        "aws-sdk": "^2.1386.0"
    }
}

Move to the lambda directory and install the AWS SDK by running the command below. The npm install is used to install the dependencies listed in the package.json file of the project.

npm install

This will be the structure :

Zip the folder [lambda.zip]

Activity 2 : Create a Bucket in S3

Upload the lambda Zip file here Go to the lambda.zip and Copy the Object URL.

Now go to the lambda function and upload the zip by attaching the S3 location here. Now go to Test Edit the JSON code:

{
  "name": "Akash Saha",
  "email": "mr.akashsaha574@gmail.com",
  "subject": "It's Me",
  "message": "Testing"
}

Click on the Test to check if it is getting successfully executed or not.

Activity 3 : Create a API gateway

select REST API Private and Build

Cerate Resource

Create Method - Post

Deploy the API and copy the Invoke URL

Activity 4 : Create a table in Dynamo DB

Activity 5 : Set Permission

Set the IAM roles give the lambda function permission to get acccess of DynamoDB

Aganin go to the lambda and Test with the JSON code, this time the data will be inserted in the database

Activity 6 : Create another Bucket and upload the website

Replace the fetch line of code in your script.js file with the Invoke URL of your API Gateway adding at the end the /submit endpoint.

Edit the Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::static-website-bucket-project/*"
        }
    ]
}

Configure the CORS of API gateway and Bucket

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST"
        ],
        "AllowedOrigins": [
            "http://static-website-bucket-project.s3-website.ap-south-1.amazonaws.com"
        ],
        "ExposeHeaders": []
    }
]

Now Finally Test the static website by filling out the Form and Check if the data is being inserted properly to the database or not

AkashSaha2001 / Serverless_ContactForm_AWS