Let’s build a serverless contact form!

What am i going to be using?

KOR Framework
AWS SES
IAM

This is a continuation of one of my previous posts “Building a Serverless Vue.js Front End in just a few minutes”. I thought it would be useful to make the contact form at the bottom of the page actually work, and why not do it in a serverless way?

Step 1

First I need to log into my KOR account. I will start by uploading a repository where I have my Lambda Function code. It looks like this:

index.js

const sendEmail = require('./sendEmail');

exports.handler = async (event, context) => {
    return sendEmail(event.name, event.subject, event.message, event.email)
        .then((response) => {
            context.done(null, 'Email Sent');
    })

};

sendEmail.js

const AWS = require('aws-sdk');
const ses = new AWS.SES();

function sendEmail(name, subject, message, senderEmail) {
  const params = {
    Destination: {
        ToAddresses: [
            'rodrigo@kor-test.com'
        ]
      },
    Message: {
        Body: {
            Text: {
                Data: name + message,
                Charset: 'UTF-8'
            }
        },
        Subject: {
            Data: subject,
            Charset: 'UTF-8'
        }
    },
    Source: 'rodrigo@kor-test.com,
    ReplyToAddresses: [senderEmail]
  }
  return ses.sendEmail(params).promise();
}

module.exports = sendEmail;

The original code I modified can be found here: https://wanago.io/2020/08/31/aws-lambda-contact-form-simple-email-service/ ❤️

After cloning my function, I can confirm that everything is fine by clicking any file inside and inspecting it. All good here.

Respositories Section

Step 2: Permissions

Now I need to enable the SES permitions into the role that KOR controls. This is very easy to do. Inside my AwesomeNuts habitat, I click on settings and then on Habitat Roles.

I see there that KOR-TEMPLATE-1606783402106 handles the resources of my habitat.

Habitat Roles

Next, I need to go to AWS IAM roles section and search for the habitat role name.

Inside AWS IAM

Good, now inside the role I will find the KOR policy attached.

Policies

Now I need to edit the policy and add the following action:

{
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail",
                "ses:SendRawEmail"
            ],
            "Resource": "*"
        },

For the sake of the test, I will leave the resource with *.

Step 3: AWS SES

Ok, before I proceed I will add a quick step to verify my email on AWS SES. This is the same email that you can see inside the lambda function code. On AWS SES, I will start by verifying the domain:

Inside AWS SES

Since my domain is registered on AWS, I recieved the prompt to add the Route53 records.

Route53 Verification

After a couple of minutes, the domain was verified.

Confirmed!

Now I just needed to go to Email Addresses, add my email and confirm it via the email they sent to me. All right, we are ready to move on to the fun stuff.

Step 4: Creating the Function

I’ll go back to my AwesomeNuts Habitat on KOR - Settings - Functions - New Function.

KOR Functions

Here I will select my LambdaContact repository, the role, put the handler and select Nodejs 12.

Creating the Function

Deploying the Function

The next step is going to Releases and click the “Deploy All” button.

Deploying

If I want to test the function I can click on the yellow “Test Function” button and do the following:

Testing

After selecting RequestResponse, I put this payload and click invoke:

{
  "email": "some@email.com",
  "subject": "testing2",
  "message": "Hello my friend"
}

It’s alive!

Got it on my inbox :)

Final Step, Wrapping it all up

Ok, I have the function, the permissions, and SES working, but there is still one piece missing. How am I going to send information from my website?

For this, I need to link my lambda with an API Gateway and create a POST method.

Thankfully, with KOR this is extremely easy to do. In my habitat settings, I will create a new API Gateway which will take care of all the hard work for me.

API Gateway

I named my API Gateway “ContactForm”. Then after creating it, I can add an endpoint to it. I will create a POST method. The nice thing here is that I can select the function that will be triggered by the method. In my case it is the LambdaContact.

Creating the POST Method