SECRET OF CSS

Create a Serverless Form for a Serverless Website | by Paulo Carvalho | Jun, 2022


How to create a serverless backend to accept incoming form data (or other data from API requests) and send an email containing that data

0*54V65V93k8LH86Nu
Photo by Jonathan in Unsplash

S3+CloudFront makes for a simple and low-cost solution to hosting a static website. However, what happens when you require an HTML form? We will go over implementing a simple serverless back end for this purpose!

AWS S3 + Cloudfront makes for a low-cost and scalable option for hosting a static website such as the landing page for a startup, or a signup page for a newsletter. However, how can you implement a form without a server?

In this article, we will go over a serverless backend for a form using AWS’s Lambda and API Gateway to trigger the sending of an email with the filled-out information from the form to a predetermined email using AWS SES.

Before we dive into Lambda’s code, we need to set up the development environment and our AWS account including the points below:

  1. The AWS Serverless Application Model (SAM) local development tools are installed as per the instructions here.
  2. AWS SES is configured in production mode (not sandbox), and the domain has been verified as per the instructions here.
  3. Have a website with an HTML form that can be configured to submit data to the endpoint of the API gateway that will be created later in this article.

We will be using SAM to deploy Lambda and its dependent resources. For a deeper introduction to SAM see the article below.

Let’s start with the folder structure. We will have a directory for the application source files, one for scripts that can be used for deploying the application, and top-level files such as template.yaml that are used by SAM.

my-serverless-form/
├── cmd/
│ └── deploy.sh
├── src/
| ├── package.json
│ └── index.js
├── .gitignore
└── template.yaml

The template.yaml will look like the one below:

The template above defines two resources:

  1. FormSubmissionFunction: The Lambda that when triggered will send an email.
  2. FormSubmissionApi: The API Gateway that will receive public requests from the internet and trigger Lambda.

The lambda code will be specified in the index.js file such as the one shown below:

In it, we send an email using SES containing the data from the eventObject which will contain the body and header of the request that was used to trigger the Lambda. You can format the body of the email as desired.

To parse form data in the Lambda, I recommend using the library below:

To deploy the Lambda, you can run the script.sh file (shown below) and follow the onscreen instructions:

We have gone over how to create a serverless backend that can be used to accept incoming form data (or other data from API requests) and send an email containing the data.

However, before deploying something like this to production it may be wise to implement reCaptcha (or similar) to avoid bots from discovering your endpoint and submitting false data (you don’t want to be charged for Lambda execution time for sending emails from bots).

Hope you found this helpful!



News Credit

%d bloggers like this: