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

1. Home
2. Blog
3. Engineering Titbits
4. 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)

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

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.

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

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:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1504526549000",
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}

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.

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

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)

var AWS = require('aws-sdk');
var ses = new AWS.SES();
 
var RECEIVER = 'mail@example.com';
var SENDER = 'mail@example.com';

var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'example.com'},
 "statusCode": 200,
 "body": "{\"result\": \"Success.\"}"
 };

exports.handler = function (event, context) {
    console.log('Received event:', event);
    sendEmail(event, function (err, data) {
        context.done(err, null);
    });
};
 
function sendEmail (event, done) {
    var params = {
        Destination: {
            ToAddresses: [
                RECEIVER
            ]
        },
        Message: {
            Body: {
                Text: {
                    Data: 'name: ' + event.name + '\nphone: ' + event.phone + '\nemail: ' + event.email + '\ndesc: ' + event.desc,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'Website Mail Form: ' + event.name,
                Charset: 'UTF-8'
            }
        },
        Source: SENDER
    };
    ses.sendEmail(params, done);
}

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

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.

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.

<form id="contact-form" method="post">
 <div class="form-group">
  <h4>Name:</h4>
  <input type="text" id="name-input" placeholder="Name..." class="form-control" />
 </div>
 <div class="form-group">
  <h4>Phone:</h4>
  <input type="phone" id="phone-input" placeholder="Phone..." class="form-control" />
 </div>
 <div class="form-group">
  <h4>Email:</h4>
  <input type="email" id="email-input" placeholder="Email..." class="form-control" />
 </div>
 <div class="form-group">
  <h4>Message:</h4>
  <textarea id="description-input" rows="3" placeholder="Message…" class="form-control" ></textarea>
 </div>
 <div class="g-recaptcha" data-sitekey="YOUR_GOOGLE_RECAPTCHA_KEY" class="form-control"></div>
 <button type="submit" onClick="submitToAPI(event)" class="btn btn-primary">Submit</button>
</form>

5b. You should now have something that looks like this.

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)

function submitToAPI(e) {
       e.preventDefault();
       var URL = "https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/01/contact";

            var Namere = /[A-Za-z]{1}[A-Za-z]/;
            if (!Namere.test($("#name-input").val())) {
                         alert ("Name can not less than 2 char");
                return;
            }
            var mobilere = /[0-9]{10}/;
            if (!mobilere.test($("#phone-input").val())) {
                alert ("Please enter valid mobile number");
                return;
            }
            if ($("#email-input").val()=="") {
                alert ("Please enter your email id");
                return;
            }

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