Feedback Form

Serverless feedback form using S3, Lambda, DynamoDB, SES, and API Gateway

The walkthrough below provides the front end code for a serverless contact or feedback form as well as the necessary steps in AWS to setup an API Gateway, IAM roles, Lambda function, and a DynamoDB Table. Code for both the front and back end are on github:
https://github.com/kyle138/feedbackform.

The code in this repo is split into two folders, [S3] and [lambda].
[S3]:
All files and folders within the S3 folder will need to go within an S3 bucket configured for web hosting. This serves the front end HTML as well as the clientside javascript files required for collecting the form information and submitting the data to the API Gateway.
[Lambda]:
The lambda folder contains a single lambdafunc.js file. The contents of this file will be copied into your lambda function from within the AWS console.

SES

Verify a New Email Address (email address you control where feedback will be sent)
Make note of the verified email addresses for use in the Role in the Lambda section.

DynamoDB

Create Table
Name it ‘feedback’
PrimaryKey ‘datetime’ (string)
Make note of the ARN for the role in the next section.

Lambda

Create Lambda function (use blueprint ‘microservice-http-endpoint’)
Name the function ‘feedback’, make sure runtime is node.js
Leave the code as-is for now, we’ll update that later
Role: Create a new role based off of ‘*Basic with DynamoDB’

Name the role ‘lambda_dynamodb_feedback’
Edit the policy with the contents of lambda/lambda_dynamodb_role.json

Edit the json resource with the ARN of your dynamoDB
Edit the json conditions with the verified email address(es)

Set API endpoint type to API Gateway
Select the feedback gateway created in the API Gateway section
Select POST for Method
Select Open for Security
Review and [Create Function]
Now replace the lambda code with the contents of the lambda/lambdafunc.js > [Save and Test]
Choose sample event template ‘Hello World’ and use the following:


      {
       "name": "Test Name",
       "email": "email@test.com",
       "subject": "Test Subject",
       "message": "This is the test message."
      }

You should receive “True”, also the test items should be in the DynamoDB table and in the CloudWatch Logs and you should receive the test via email.

API Gateway

Create API gateway
Select Resource / > [Create Resource]
Name the resource ‘feedback’ with the same resource path (autopopulated)
Select the new feedback resource > [Create Method] > Select ‘POST’
Select ‘Lambda Function’ for Integration type and choose a Lambda Region

Make note of the region as the lambda function and dynamoDB will use the same

Select the Lambda Function field and begin typing ‘feedback’, your function created below should be offered as a suggestion.
[Enable CORS] (keep defaults and [Enable])
[Deploy API]

Select New Stage and name it ‘prod’
Make note of the Invoke URL for use in the front-end feedback.js file that is placed in S3.

Select Resources > POST > TEST. Use the sample event from the previous step as the Request Body and click [Test]

S3

Create an S3 bucket
Name it exactly the same as the domain you will be directing to it (eg: feedback.mydomain.com)
Configure it to serve as a website according to the following:

http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html

Place the API Gateway URL from the previous step in the feedback.js
Upload S3 files to new bucket.

Credits

By no means did I come up with all of this by myself. I simply integrated the ideas from the three links found below::

Bootstrap Jquery form source:
http://myprogrammingblog.com/2013/08/27/how-to-make-a-contact-form-with-bootstrap-3-jqueryphphtml5jqbootstrapvalidation/

S3 Static Website Hosting:
http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html

Lambda/DynamoDB/API Gateway walk through:
http://docs.aws.amazon.com/apigateway/latest/developerguide/getting-started.html