DEV Community

Cover image for How to Build Your Own Serverless Contact Form
Sai gowtham
Sai gowtham

Posted on

How to Build Your Own Serverless Contact Form

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

What are Requirements?

  1. Aws Account
  2. Nodejs
  3. Serverless framework cli.
  4. DashBird Account

Let's build a Serverless Contact Form

one

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

Enter fullscreen mode Exit fullscreen mode

number 2

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

Get Aws Credentials

threee

Create a New Directory in your Pc.

mkdir contactform
cd contactfrom
Enter fullscreen mode Exit fullscreen mode

four

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
Enter fullscreen mode Exit fullscreen mode

The above command generates the boilerplate.

five

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
Enter fullscreen mode Exit fullscreen mode

Now open contact form folder in your Favourite code Editor.

Navigate to the handler.js file

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

.

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.

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

params

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

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.

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

Updated handler.js file

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

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

Front-end Setup

Html Markup

Css

JavaScript

  • We need to make an ajax request to the endpoint.

Final Output

email

For monitoring, Debugging and error detection of lambdas we are using Dashbird

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

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

Code Repository

Other Interesting Posts on Serverless

Top comments (1)

Collapse
 
1c7 profile image
Cheng Zheng

Thanks for the tutorial.

But I always fail to send Emails. says my Email address is not verified,
even though in AWS SES Console I can see them clearly verified.
Both from and to address are the same, as the code you provided.
Anyway I give up fixing this issue