Making Dynamic Contact Form in Personal Portfolio Part-I

Here in this blog I will explain how we can make dynamic contact form in Personal Portfolio.

The diagram below presents the integration of AWS services to make dynamic contact form.

Integration of the AWS services

This integration is divided into two halves. For knowing about the second part go through this link (https://medium.com/@destarxis/making-dynamic-contact-form-in-personal-portfolio-355affc80eab)

Now let us deep dive into the first part;

Step 1

At first we need to create an API gateway and then create a new resource in AWS API Gateway. Here, I have created a new resource which has been used to create a new POST method. Via this post method all of the data submitted via form is received in Lambda function.

An API gateway with a resource and a POST method

Note: We need to choose Deployment type as Lambda while adding a new method.

Step 2

Since, our main purpose is to send an email whenever someone is contacting via the contact form present in the Portfolio website. So, I have used an AWS service, AWS SES for handling this email commnication and sending notification.

I have chosen SES because it is easy and offers more flexibility when it comes to customization. Also, its pricing is based on pay-as-you-go model which makes it less costlier because we only pay for what we use. For further reference follow this (https://aws.plainenglish.io/amazon-ses-and-amazon-sns-choosing-the-right-messaging-service-for-your-needs-12d3ac6112f3).

For configuring SES its easy, just go to the AWS Console and set up a new email and verify it. Then we can use it for email notifications.

AWS SES verified identities page

Step 3

After configuring both SES and API Gateway now its time for integrating them together with the creation of a Lambda function. Here, I have created a new Lambda function where I have handled the POST request coming from API endpoint with request body which in turn sent as a email to the verified identities registered in SES.

Breaking down the steps to set up the Lambda, at first we need to allow Lambda to send email using SES. After granting the permission now we are ready to go.

We need to write logic in the Code section of Lambda to send an email with the data received from contact form.

Demo Code snippet is shown as;

index.mjs

import { SESClient } from "@aws-sdk/client-ses";
const ses = new SESClient({region : "us-east-1"});
import {emailHelper} from "./helper.mjs";
export const handler = async function (event){
  const {name, email, phoneNum, subject, message } = JSON.parse(event.body);
  const command = await emailHelper(name, email, phoneNum, subject, message);
  try {
      let response = await ses.send(command);
      let responsebody = {
      statusCode: 200,
      headers: {
              'Access-Control-Allow-Origin': '*'
          },
      body: JSON.stringify("Email sent !!!")
    };
      return responsebody;
  }
    catch (error) {
      console.log(error);
      throw new Error("Something went wrong");
  }
};

helper.mjs

import { SendEmailCommand } from "@aws-sdk/client-ses";
export const emailHelper = async function (name, email, phoneNum, subject, message){
  const params = {
    Destination :{
      ToAddresses:["<your email present as verified identity in SES>"],
    },
    Message :{
      Body :{
        Text :{
          Data : `You just got a message from ${name} - ${email} :
          ${message}`
        },
      },
      Subject :{
        Data : `${subject}`
      },
    },
    Source : "<your email present as verified identity in SES>",
    };
  const command = new SendEmailCommand(params);
  return command;
};

After setting up the code present above in Lambda function, just deploy it and send the data from contact form.

Sample Lambda function with API Gateway and Code Source

A sample contact form is provided below. For the demonstration purpose I used Postman to send the request where I have provided all the required data via request body.

Sample contact form

POST request with body

Once the request is successfully sent, an email is received in the registered email address with form data that has been sent as a request body.

Sample email received after successful POST request

The overall workflow of the steps above is presented in a diagram below;

Note: Cloudwatch and IAM role for Lambda is created by default if we choose to create a new role while creating the Lambda.

Here I am done with the Part I of this blog — Now for further integration of this setup with SQS and DynamoDB follow my Part II blog.