If you are here I assume that you probably don’t know PHP nor Wordpress, and so you decided to built a static web page or use some static page generator like Jekyll, Grav or GatsbyJS. Right now your obvious option to provide ability to create a contact from is using a formspree.io or something similar. I’m going to show you how to write your own contact form ‘backend’ in very short time.
Please remember that this is not a step by step tutorial, I’m describing overall architecture with the code (copy-paste ready certification). If you have any remarks, write a comment in section below or create a Github issue. 😉
- minimal knowledge about Amazon Web Services
- Amazon Lambda
- Amazon SES
- Amazon API Gateway
Same technique I used in many websites, here is one example.
So far I didn’t have any issue with this solution.
If you are familiar with used technologies the diagram should be pretty straightforward for you.
Static web page should be gathering data from contact form, validate and send them using XHR Fetch, jQuery or in
other way to API Gateway by POST method. API Gateway will invoke Lambda function, and the Lambda function will invoke
sendEmail(...) on SES service.
0. Verify e-mail address
E-mail address verification can be done here (eu-west-1)
1. Lambda Function
We will start with creating Lambda function and choosing NodeJS 8.1 environment.
When we have prepared environment we can start to implement the function. First important thing is that we need to import
aws-sdk to use SES and other Amazon services.
Success and error responses. This part is more important than you think. If we return wrong JSON from lambda function to API Gateway, the client (contact form in this case) will get HTTP 500 status. Code will be invoked and email sent anyway, but it’s just a good practise to follow the documentation.
Check is domain allowed
By using this function we can easily turn on and off e-mail sending from certain domains.
<pre></pre> tags and
Send e-mail by SES
The most important part of this function is of course sending email by SES. We create a params with message, subject and all other options which can be found here.
Now we can deploy our function and move to API Gateway.
2. API Gateway
Setting up API Gateway for Lambda functions, should be straightforward. There is no need to code any thing, just click-and-play configuration.
In this case I setup my endpoint to receive any http method. For working contact form you will need only
Things to remember
- Every time we change something on endpoint configuration we need deploy API again to see changes.
Actions -> Deploy API
- Remember about setting up CORS while using API Gateway.
Actions -> Enable CORS
3. Contact form example
We can scale this technique to multiple web pages with ease, but this solution in current form has few downsides. For now the only one protection against DDoS or some similar attack is rate limiter included in Lambda function. Right now there is no bot protection, no captcha or something like that. We can add Google re-captcha on the contact form and setup rate limiting on both API Gateway and Lambda function, to avoid unnecessary costs.