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. What are Requirements?

Let's build a Serverless Contact Form First we need to install the Serverless Framework cli.

Open your terminal and run below command. Get Aws Credentials Create a New Directory in your Pc. Serverless Offers us a different type of templates but we are using Nodejs as our Backend so that we are creating nodejs template.

The above command generates the boilerplate. 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.

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 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.

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. Front-end Setup

Html Markup

Final Output Why Dashbird?

DashBird Interface Code Repository

Other Interesting Posts on Serverless

Did you find this post useful? Show some love! Sai gowtham

JavaScript developer, Writer & Serverless code of conduct - report abuse
Classic DEV Post from Jun 18

What are your programming blogs? I created a monster

stereobooster - Oct 13

ryanwhocodes - Oct 14

Joan Alba Maldonado - Oct 14

Mohamed Sameer - Oct 14 Trending on dev.to
Come with me on a journey through this website's source code by way of a bug
#webdev #rails #opensource
Why we chose Turbolinks instead of building an SPA
#javascript #webdev #productivity #elixir
Tame your Firebase Realtime Database with MobX
#mobx #firebase #javascript #react
Challenge: CSS Navigation
#challenge #beginners #fun
Find and Kill Port Processes on a Mac Using Bash
#beginners #bash #devops #rails
The int vs. Integer pitfall of Java's ArrayList.remove()
#java #beginners #debugging #pitfalls
Does anyone else think HTML5 multiple select sucks?
#discuss #javascript #html5 #webdev
Writing alternative text that matters
#screenreaders #a11y #ux #webdev

Join our DEV Community :) Auth With Twitter Auth With GitHub

We strive for transparency and don't collect excess data.
[null, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s---5pqMbuf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/sz4vykzhxho5d026dy8w.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s---5pqMbuf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/sz4vykzhxho5d026dy8w.png", "formatted_filename": "sz vykzhxho d dy w", "alt_text": "one"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--FyGfA6Hb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tgjftjzfdzahedv83dca.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--FyGfA6Hb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/tgjftjzfdzahedv83dca.png", "formatted_filename": "tgjftjzfdzahedv dca", "alt_text": "number 2"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--dNW_opEB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nww9ss77kdrkqu3fmuw9.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--dNW_opEB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nww9ss77kdrkqu3fmuw9.png", "formatted_filename": "nww ss kdrkqu fmuw", "alt_text": "threee"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--F2Zm8x8I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/l9mfxw87p5u90zmjqrdf.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--F2Zm8x8I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/l9mfxw87p5u90zmjqrdf.png", "formatted_filename": "l mfxw p u zmjqrdf", "alt_text": "four"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--kT8UjiBA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/a5k7f82n0g7wkl9p212c.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--kT8UjiBA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/a5k7f82n0g7wkl9p212c.png", "formatted_filename": "a k f n g wkl p c", "alt_text": "five"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--D6o_jXbP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i9kwuzdx548wm3g2jm9h.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--D6o_jXbP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i9kwuzdx548wm3g2jm9h.png", "formatted_filename": "i kwuzdx wm g jm h"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--i0H2CVG4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ozl7h296gourcltyvqa5.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--i0H2CVG4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ozl7h296gourcltyvqa5.png", "formatted_filename": "ozl h gourcltyvqa", "alt_text": "verify"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://res.cloudinary.com/practicaldev/image/fetch/s--yU61mksz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/2poyigoc7v67rdoviugj.png", "src": "https://res.cloudinary.com/practicaldev/image/fetch/s--yU61mksz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/2poyigoc7v67rdoviugj.png", "formatted_filename": "poyigoc v rdoviugj", "alt_text": "terminal endpoints"}, null, null, null, null, null, null, null, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/reactions-stack-4bb9c1e4b3e71b7aa135d6f9a5ef29a6494141da882edd4fa971a77abe13dbe7.png", "src": "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/reactions-stack-4bb9c1e4b3e71b7aa135d6f9a5ef29a6494141da882edd4fa971a77abe13dbe7.png", "formatted_filename": "reactions stack bb c e b e b aa d f a ef a da edd fa a abe dbe", "alt_text": "Reactions"}, null, {"document_url": "https://dev.to/saigowthamr/how-to-build-your-own-serverless-contact-form---3mkn", "unformatted_src": "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/comments-bubble-7448082accd39cfe9db9b977f38fa6e8f8d26dc43e142c5d160400d6f952ee47.png", "src": "https://practicaldev-herokuapp-com.freetls.fastly.net/assets/comments-bubble-7448082accd39cfe9db9b977f38fa6e8f8d26dc43e142c5d160400d6f952ee47.png", "formatted_filename": "comments bubble accd cfe db b f fa e f d dc e c d d f ee", "alt_text": "Reactions"}, null, null, null, null]