Serverless Contact Forms in AWS

A few weeks ago, I posted how I had made a real website during my AWS training course; in lieu of a "dummy" HTML5 site. I loved working through Cascading Style Sheets, HTML code, embedded Youtube videos and making sure the site looked good on a laptop, tablet and phone. See:

One thing that bothered me still was that Contact Form in the HTML5 template didn't actually work. That set m of on a 3 week exploration of trying things. Here is what I learned:

• HTML5 template was fine -- but it assumed traditional server-side scripting.
• Amazon S3 doesn't host server-side scripting.
• There are alot of email service sites out there that I thought would be "short-cuts" to a free-ish level forms.

But finally, I came full circle to AWS's own article: "Create Dynamic Contact Forms for S3 Static Websites Using AWS Lambda, Amazon API Gateway, and Amazon SES" - link here. I would definitely encourage new AWS developers to NOT be intimidated by the title. The article explains the architecture well. And if were to add, I think it sets the right habit from a security and a scalable services point of view.

However, AWS has evolved since the author wrote that article. Some of the instructions are right, but where to go execute them has changed.

From the top of the article down -- here goes:

1. Lambda :: After you select "Hello World" - you will name your Lambda function. If you want to stick close to the article, definitely use "mailfwd" as that is what is show a few steps later
2. Lambda :: In the actual code snippet, the author used the same email for SENDER and RECEIVER. Use different emails. I will explain why in the Amazon SES commentary below.
3. Lambda :: In this article, there is code to edit Policy. This used to be something you could do on the Permissions tab within Lambda. But this isn't true any more. Click on Permissions tab; then click on the Role name. This will take you out of Lambda and into the IAM Management page for the role name created by the basic function. It is here that you will Policy Name default created for this role; click on edit; and then copy-paste the code from the article.
4. API Gateway :: When you first enter the API Gateway, I think previously there was only REST API. But now there are a few more options. So you are asked first to select the typ. Select REST API; and follow Steps 1, 2, and 3.
5. API Gateway :: After Step 3, do Step 6 first. That is...click on POST. Then click on Actions-> Enable CORS. That will create the extra OPTIONS underneath your Resource. When you Deploy, it will all work out right.
6. Setup Amazon SES :: The example provided assume one email address for SENDER and RECEIVER. I found that Amazon SES now chokes at that. So I, out of superstition and wanting to get it right, went ahead and confirmed both SENDER and RECEIVER email here.
7. Connecting it together :: The example assumed that the HTML being worked with was a dedicated CONTACT.HTML. But in my HTML 5 format, the Contact "Page" was subsection within INDEX.HTML. So...I actually placed a code Script call right under the Form code that was created "Your contact form" section, the first section, of the article. Here is what I wrote:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>

copy and past of function submitToAPI(e) from the article

</script>

Conclusion:

I am really grateful for how many contributors there are to the AWS ecosystem. As of the posting of this article, I hope my notes can help update the already great work Saurabh Shrivastava did. Without it, my little website would've still felt strange.