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.
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
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
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
1b. Click the Verify a New Email Address
1c. Enter the email address you would like to use.
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.
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
2b. Select type > AWS service. Select service > Lambda. Click Next.
2c. Click Create Policy
2d. Click JSON tab and replace the existing code with the code below:
2e. Click Review Policy
2f. Enter a name and click Create Policy
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.
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.
3a. Navigate to Lambda from the AWS Console and click Create Function
3b. Select Blueprints, then enter “hello” in the search bar. Select the hello-world nodejs Blueprint (NodeJS 8.10) and click Configure
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
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)
4a. Navigate to API Gateway from the AWS Console and click Create API
4b. Enter a name for the API and click Create API
4c. Select the new API, click on the “actions” button dropdown, and select Create Resource
4d. Enter a name and path for the new resource. Tick to Enable API Gateway CORS and click Create Resource
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
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.
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
4j. Now grab your Restful API URL from the “stages” tab which we will use for the 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.
5c. Add the JQuery code below to your
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.
AWS Architecture Blog – Link