How to Build Your Own Serverless Contact Form  
Tags: aws, javascript, webdev, beginners
Published: 2018-06-11 07:43:49

---
title: How to Build Your Own Serverless Contact Form  
published: true
description: Build Your Own Serverless Contact Form 
tags: aws,javascript,webdev,beginners
cover_image: https://cdn.pixabay.com/photo/2017/12/02/14/38/contact-us-2993000_960_720.jpg
---

Static Sites are developed by using Html, CSS, and JavaScript.
You don't need to set up any database or server. GitHub, Netlify offers us free hosting for the static sites by adding a Contact form to a site you need to pay for the server even though if no user visits to your site. By using Serverless Aws only charges for you when someone hits your webpage if there is no traffic it means no charges.


####In this Article, You will learn about how to build A Serverless Contact form by using SES(Simple Email Service), Aws Lambda and Serverless Framework.

![email](https://thepracticaldev.s3.amazonaws.com/i/23yriddx3cajprkhuk95.gif)

# What are Requirements?

1. [Aws Account](https://aws.amazon.com/free/)
2. Nodejs
3. Serverless framework cli.
4. [DashBird Account](https://dashbird.io/)

Let's build a Serverless Contact Form

![one](https://thepracticaldev.s3.amazonaws.com/i/sz4vykzhxho5d026dy8w.png)

### First we need to install the Serverless Framework cli. 

Open your terminal and run below command.

```
npm install -g serverless

sls login // SLS is a shortcut of serverless

```

![number 2](https://thepracticaldev.s3.amazonaws.com/i/tgjftjzfdzahedv83dca.png)

###After sls login, You need to configure Your Aws Credentials with a serverless framework.

**[Get Aws Credentials](https://www.youtube.com/watch?v=tgb_MRVylWw)**


![threee](https://thepracticaldev.s3.amazonaws.com/i/nww9ss77kdrkqu3fmuw9.png)
###Create a New Directory in your Pc. 

```
mkdir contactform
cd contactfrom
```


![four](https://thepracticaldev.s3.amazonaws.com/i/l9mfxw87p5u90zmjqrdf.png)
### Serverless Offers us a different type of templates but we are using Nodejs as our Backend so that we are creating nodejs template.

```
serverless create --template aws-nodejs
```

The above command generates the boilerplate.


![five](https://thepracticaldev.s3.amazonaws.com/i/a5k7f82n0g7wkl9p212c.png)

###Now we need to initialize the Package.json file and install some dependencies.

```
npm init -y // generates package.json file

npm i -s body-parser cors express serverless-http aws-sdk
```


**Now open contact form folder in your Favourite code Editor.**

![](https://thepracticaldev.s3.amazonaws.com/i/i9kwuzdx548wm3g2jm9h.png)
 

# Navigate to the handler.js file

Clear everything in the  handler.js  because we are writing it from scratch.

{% gist https://gist.github.com/saigowthamr/a63dfee1f80d9c6ba4722c92209e5c4f %}.

We are invoking the SES constructor on line 15 and a single endpoint. If you want to know about How to Create a Serverless Endpoints Using Express Checkout My Article [Build and Deploy a Rest API Using Serverless, Express, and Nodejs](https://dev.to/saigowthamr/build-and-deploy-a-rest-api--using-serverless-express-and-nodejs-3331).


We need to invoke the ses.sendEmail(params,function(err,data){}) method inside the post method.


## [params](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/SES.html#sendEmail-property)

**Source — (String)**:
The email address that is sending the email. This email address must be either individually verified with Amazon SES.

###To verify Your email address 
1. Open your Aws Console and type ses in a Search bar 
2. Click on  Simple Email Service.
3. Once it is open in your left sidebar click on email address add Your Email Address.
4. You will receive a Verification email.

![verify](https://thepracticaldev.s3.amazonaws.com/i/ozl7h296gourcltyvqa5.png)



**Destination**:
### The destination for this email, composed of To, CC, and BCC fields.

ToAddresses — Array of email addresses.
CcAddresses — Array of email addresses.
BccAddresses — Array of email addresses.


**Message:**

**Subject[Object]:**
The subject of the message: A short summary of the content, which will appear in the recipient's inbox.

**Data(String):** The content of your form.

{% gist https://gist.github.com/saigowthamr/3692640733e965a61d8ffc9b4ae0424a %}


We need to pass these params object to the ses.sendEmail method.


## Updated handler.js file

{% gist https://gist.github.com/saigowthamr/3237751b64c508e0fca62221469a5e00 %}


Open Your serverless.yml file and Update with below code.

{% gist https://gist.github.com/saigowthamr/3e4316bb040d9955c08e36271ee8796b %}



Now Open your Terminal and run sls deploy to deploy your code in Aws. Once you run the command after some time your API endpoints are visible in your terminal.

![terminal endpoints](https://thepracticaldev.s3.amazonaws.com/i/2poyigoc7v67rdoviugj.png)


# Front-end Setup


##Html Markup

{% gist https://gist.github.com/saigowthamr/ebcc4310fa1ca214ca1e4168feb4b8ed %}

##Css

{% gist https://gist.github.com/saigowthamr/354eae2005b80658ceeaed59d87c6d61 %}


# JavaScript
 - We need to make an ajax request to the endpoint. 

{% gist https://gist.github.com/saigowthamr/df3a0585268e8623c8078923601ad9d9 %}

# Final Output

![email](https://thepracticaldev.s3.amazonaws.com/i/23yriddx3cajprkhuk95.gif)

For monitoring, Debugging and error detection of lambdas we are using [Dashbird](https://dashbird.io)

# Why Dashbird?

  -  Dashbird helps us actively monitoring the health and errors. 

  -  One main thing about Dashbird is its user-friendly Interface.

  -  Dashbird visualizes all your AWS Lambda metrics like
     memory utilization, invocation count, and execution duration.


# DashBird Interface

![Dashbird monitoring](https://im4.ezgif.com/tmp/ezgif-4-b1b1b5a282.gif)



##### Hope you guys enjoyed if you have any doubts feel free to ask.


###[Code Repository](https://github.com/saigowthamr/Serverless-Contact-us-form)


## Other Interesting Posts on Serverless

- [How to Build Your First Serverless Website](https://dev.to/saigowthamr/how-to-build-your-first-serverless-webpage-using-aws-lambda-31de)
- [How to Build and Deploy a Rest API using Serverless Lambda](https://dev.to/saigowthamr/build-and-deploy-a-rest-api--using-serverless-express-and-nodejs-3331)