Build a Serverless Contact Form for your Stunning AWS S3 Static Website using Lambda, API Gateway, and SES in 2020.

Having a contact form is essential in making sure your potential new clients can get in contact with you fast and easy. Having a “Contact Us” form on your static S3 website is necessary; programming it on the frontend is easy, but for the backend? Now that’s a bit complicated. In this example, I will show you how to set up your S3 state website with a contact form.

With your S3 static website already up and running and your contact form already created, we first want to start with our Lambda function.

• Make sure your S3 bucket and Lambda function are in the same region.
• Click on Create function.
• Click on Use a blueprint.
• Type in hello in the search bar.
• Select the first option: hello-world using nodejs.
• Click on Configure on the bottom right.

Under Basic Information type in a function name you would like to use and select Create a new role with basic Lambda permissions, we’re going to modify that later. Click on Create function.

On the following screen, go ahead and copy and paste this function into your Function Code:

var AWS = require('aws-sdk');
var ses = new AWS.SES();
var RECEIVER = 'ADD YOUR EMAIL';
var SENDER = 'ADD YOUR EMAIL';
var response = {
"isBase64Encoded": false,
"headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
"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: 'ADD A SUBJECT NAME: ' + event.name,
                Charset: 'UTF-8'
            }
         },
         Source: SENDER
    };
    ses.sendEmail(params, done);
}

When copying and pasting the format, it should automatically set itself up, but just in case this is how it should look like:

On lines 3 and 4, insert the email addresses you want to use for sending and receiving inquiries from your contact form, you can add the same email, it doesn’t matter. Also, on line 32, add a subject you would like to use when receiving emails. Save the function, but before testing it, we must do a couple of things beforehand:

Head to the SES Management Console:

• Click on Email Addresses.
• Click on Verify a New Email Address.
• Type in the email address you would like to use to receive the inquiries.
• You should receive an email from AWS asking you to verify the email; please do so.
• The status should say verified after a few minutes.