Serverless Contact form sending for a static site.

Casey van roose
Jan 20 · 4 min read

A few weeks ago I was approached to build a static site for a company. No Content Management System (CMS) needed, they just wanted to be online and had already had a designer create something that they liked. Simple I thought. There were quite a few interactive parts on the site so I decided to use React.js. I accepted the job and started to set things up. It was then I realised that I’d need some way of making the contact form on this static site send an email to the necessary recipients. Here is how I solved this problem with Amazon Web Services (AWS).

Set up Simple Email Service (SES)

First I had to set up an AWS account which is really straight forward.

From there I had to verify an email address that would send the email from the contact form.

Create IAM role

Next, I had to create an Identity and Access Management (IAM) role with the permissions that the lambda function would have access to.

Here’s where you create the role (took me a while to find!)

Under trusted entity, I selected AWS service and Lambda as the service that would use the role.

Next I had to create a permission policy. Clicking on JSON I could input the following code.

I then named and saved the policy, ensuring it was attached to the IAM role.

Lambda Function

Next, I had to create a lambda function. This would be the code that runs when the data from the contact form gets sent to AWS and an email needs to be sent to the webmaster of the site.

I started with the hello-world node.js blueprint found by clicking on “Use a blueprint” and searching for “hello world”. I gave the function a name and made sure the previously created IAM role was selected in the dropdown.

In the index.js file, I replaced the existing code with the following that I luckily found online.

I had to replace the email addresses with the ones that would be used and the site address to the URL of the site with the contact form. The subject was changed by altering the data value in the subject object to make things really clear for the client receiving the email.

API Gateway endpoint

Next, I had to create an endpoint to send the contact form to. This would then trigger the Lambda function.

I created a new resource under the actions dropdown and then deployed the API. I then selected the new resource and created a new POST method.

In the methods set up, I selected the Lambda Function that I wanted to trigger. Once the method was saved the URL that I would need to send the contact form data to was displayed.

Create the form

Now I was ready to build the contact form on the site. I used JSX as it was a React site.

This then created the following form and behaviour on the site.

I created a function for simple form validation and to check that the required information was present on submission. The data was then set into the correct format before sending to the endpoint created earlier.

And thats it! A static site with a fully functioning contact form. The site can be hosted using basic cheap hosting such as S3 and no database or server set up is needed.

Casey van roose

Written by

Web Developer and Graphic Designer. Lover of fitness, tech and sci fi!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade