Building Our Contact Form Using Severless And AWS Lambda

If you have read our blog post about why we moved to GatsbyJs, you would probably know that we redesigned and built our website in house. For me, it provided an amazing opportunity to experience building a site for the first time using GatsbyJs. The journey itself has been nothing short of ‘blazing fast.’

In today’s post, I am going to run through how we specifically built out contact us form. A component, made to be reusable (Thank you React!), that we can use to enable communication with our clientele.

The process began by coming up with the requirements that the form component was meant to serve us. See, this is not just about designing the UI, but I will go through what we have used and how together, we ended up with a working form equipped with the ability to connect to a serverless lambda function.

For building our form, we used a combination of Material UI and Formik. In short Formik helps with managing form’s states in React, plus it comes in with some handy other built in methods. You can read more about it here.

Having built our form, we needed to be able to handle the data. The requirements flow consisted of :

• Getting the data captured by the user using the form.
• Send the data to a serverless function hosted on AWS, namely API Gateway.
• The serverless function then uses SendGrid to send an email along with the details to a selected email address.
• The form sends feedback to the user once the cycle has completed.

Step 1: Creating a serverless application using NodeJs

First we created a new application using the Serverless CLI. this can be done by running the command (from the desired directory)

serverless create --template aws-nodejs

Step 2: Installing SendGrid Using NPM

Based off their site, SendGrid is a cloud-based SMTP provider that allows you to send email without having to maintain email servers. The SDK provides a wrapper around their REST API that enables us to send emails through our app.

They provide a wide range of templating features for outgoing mails and categorization as well as subscription management. For the purpose of our app, we will only make us of a small subset of functionalities they offer. You can install its package using npm within your app and pass in the required data for it to process.
It is so simple and they provide the basic code needed to be able to send an email.

npm i sendgrid

Or if you are like us and use yarn

yarn add sendgrid

Step 3: Creating a Serverless Service

This service contains the code functionality that receives data from our website and then packages it into an object for GridSend to process and send the email.

In step 1 , We initialize our project, it created a serverless.yml file which we will use to configure our service with various events, Environment Variables as well as the function that needs to be invoked! We used SSM for secret storage so that our API keys would not be stored in any Git Repositories.

Below is an example of what .yml file would look like:

service: aws-node-alexa-skill

frameworkVersion: ">=1.4.0 <2.0.0"

provider:
  name: aws
  runtime: nodejs8.10

functions:
  luckyNumber:
    handler: handler.handler
    events:
      - alexaSkill

Step 4: Deploying the serverless service to API Gateway

We made use of the serverless deploy command to deploy our application onto AWS Lambda as follows

serverless deploy

Lambda is an AWS service that runs code in a serverless fashion, it enables developers to concentrate on code and not on all the details surrounding how the code gets run. In brief, it finds a slot somewhere in the AWS datacenter, creates a container and execute our code. A lambda function is generally invoked in relation to an event, AWS provides a multitude of events from multiple services in their cloud offering.

NOTES

Cloudformation - Serverless creates a cloud formation template that then gets deployed on your environment.

Cloudwatch - A centralized logging platform for all aws services, we can inspect lambda logs here to debug any issues.