Build Serverless Contact Forms for Amazon S3 Static Websites with AWS Lambda, Amazon API Gateway, and Amazon SES (AWS Console)


Build Serverless Contact Forms for Amazon S3 Static Websites with AWS Lambda, Amazon API Gateway, and Amazon SES (AWS Console)

02/02/2019, by Tony Clemmey

aws serverless HTML contact form

How to build a serverless contact form on an Amazon S3 static website with AWS Lambda, Amazon API Gateway, and Amazon SES.

This simple tutorial shows the basic steps to build a serverless contact form on an Amazon S3 static website. It includes a front-end HTML contact form using Bootstrap CSS and a serverless backend for the HTML contact form using an AWS Lambda function. The Amazon API Gateway HTTPS-based endpoint and Amazon’s Simple Email Service (SES) is the magic sauce.

After following these steps, you’ll have a modest knowledge using Amazon’s AWS Cloud Platform and its services — AWS Lambda, Amazon API Gateway, and Amazon SES. You can build fast, low-cost serverless contact forms for your Amazon S3 static hosted sites without needing to manage any servers.


Let’s get started with how to build a serverless contact form!


Tutorial Overview

1. Setup Amazon Simple Email Service (SES) for sending email
2. Create IAM role (AWS Lambda execution role) to allow access to AWS resources
3. Create AWS Lambda function to run the serverless contact form code telling AWS SES to send email
4. Create Amazon API Gateway endpoint for POST method which will trigger AWS Lambda function
5. Build & deploy HTML contact form

Tutorial Prerequisites

1. Amazon AWS Account (Create Account)
2. Amazon S3 Bucket Configured (Creating A Bucket)
3. Amazon CloudFront Distribution Configured – to serve HTTPS requests (Configure CloudFront)
4. Google ReCaptcha Site Key (Get A Key)

Important Note: Amazon API Gateway currently only supports HTTPS APIs

STEP 1) Setup Amazon Simple Email Service (SES)

To send emails via AWS SES, you first need to verify an email address which will be used to send the emails. Follow the steps to setup an email address with Amazon’s cloud-based email sending service. Navigate to SES in the AWS Console.

1a. Under SES Home > Identity Management > Click Email Addresses

aws serverless HTML contact form

1b. Click the Verify a New Email Address
1c. Enter the email address you would like to use.

aws serverless HTML contact form

1d. Click Verify This Email Address
1e. Check your inbox for a verification email (Amazon Web Services – Email Address Verification Request)
1f. Click the link in the email to confirm your email address.


STEP 2 ) Create IAM role (AWS Lambda execution role) to allow access to AWS resources

The IAM role (AWS Lambda execution role) you now create will be associated with the AWS Lambda function covered in the next step. The permissions you grant the IAM role will determine what AWS resources the AWS Lamba function has access to. Follow the steps to create the role and attach the policy giving access to the AWS SES. Navigate to IAM in the AWS Console.

2a. Click Create Role

aws serverless HTML contact form

2b. Select type > AWS service. Select service > Lambda. Click Next.

aws serverless HTML contact form

2c. Click Create Policy

aws serverless HTML contact form

2d. Click JSON tab and replace the existing code with the code below:



aws serverless HTML contact form

2e. Click Review Policy
2f. Enter a name and click Create Policy

aws serverless HTML contact form

aws serverless HTML contact form

2g. Close policy window.
2h. Click the refresh button to ensure the policy you just created is found. Search policy name and ensure its ticked before you click Next.

aws serverless HTML contact form

2i. Skip the optional tags section and click Next. Enter a Role name and check to ensure the policy is attached before you click Create Role.

aws serverless HTML contact form


STEP 3) Create AWS Lambda function to run the serverless contact form code telling AWS SES to send email

3a. Navigate to Lambda from the AWS Console and click Create Function

aws serverless HTML contact form

3b. Select Blueprints, then enter “hello” in the search bar. Select the hello-world nodejs Blueprint (NodeJS 8.10) and click Configure

aws serverless HTML contact form

3c. Enter a name for the function. Under Role select “Choose an existing role” and then select the role we previously created in Step 2. Click Create Function

aws serverless HTML contact form

3d. Under the Function code section select “Edit code inline” and replace the existing code in index.js with the code below and click Save. (Change ‘[email protected]’ and ‘example.com’ to your own addresses)



aws serverless HTML contact form

STEP 4) Create Amazon API Gateway endpoint for POST method which will trigger AWS Lambda function

4a. Navigate to API Gateway from the AWS Console and click Create API
4b. Enter a name for the API and click Create API

aws serverless HTML contact form

4c. Select the new API, click on the “actions” button dropdown, and select Create Resource

aws serverless HTML contact form

4d. Enter a name and path for the new resource. Tick to Enable API Gateway CORS and click Create Resource

aws serverless HTML contact form

4e. Click on the “actions” button dropdown again, and select Deploy API
4f. Under the “Deployment stage” dropdown select “new stage” and enter a name for the stage. Click Deploy

aws serverless HTML contact form

4g. Select the API “Resources”, select the new resource created in 4d and click on the “actions” button dropdown again, and select Create Method
4h. Select the Methods dropdown under the resource and choose POST and click the tick.

aws serverless HTML contact form

4i. Choose Lambda Function as integration type and in the Lambda Function input, type and search for the Lamdba Function created in Step 3. Click Save

aws serverless HTML contact form

4j. Now grab your Restful API URL from the “stages” tab which we will use for the HTML contact form.

aws serverless HTML contact form

Step 5) Build & deploy HTML contact form

5a. Copy and insert the code below into your S3 static website’s HTML contact page. Make sure you have the necessary styles and scripts in the <head> section to load Bootstrap and Google ReCaptcha.



5b. You should now have something that looks like this.
aws serverless HTML contact form

5c. Add the JQuery code below to your section for the contact form, submit function and form field validation. (Change URL to your API URL)


Conclusion

Using the AWS Console, we’ve shown how to build a serverless contact form for a static site homed on Amazon S3 with AWS Lambda, Amazon API Gateway, and Amazon SES. We finish with a fully functional serverless front-end HTML contact form (using default Bootstrap CSS) for our website. You can now use contact forms with increased speed, lower cost and remove managing servers.

References

AWS Architecture Blog – Link

Facebook Comments

#amazon #amazon api gateway #amazon s3 #amazon ses #aws #aws console #aws lambda #bootstrap #html #nodejs #serverless #webdevelopment

SECNIX SYSTEMS

www.secnix.com

CONTACT

Front Suite, First Floor,
131 High Street,
Teddington,
Middlesex,
England,
TW11 8HH

info [ @ ] secnix.com
+44 (0)3338 802382