Website Contact form using AWS

July 22, 2023

For the next iteration of the HTML form was to set it up to send an email to the web owner using AWS. The purpose behind this is, if you have a HTML site and don’t want to purchase a monthly plan or build and maintain server software. Using AWS for this functionality should be cheaper than the other ways and easier than maintaining the server version. If you plan to get a lot of contacts from the website form you will want to compare prices.

I’m using the HTML form created in the previous post:
https://www.lynnamacher.com/html-with-javascript-contact-form

Using that to start from I needed to setup the: API Gateway, Lambda and SMS.

First in the Simple Messaging System SMS I authorized my email address, this will be the email you’ll want to have the messages from the website to go to. You’ll need to get this verified before you get to the testing stage.

For the API Gateway, this will connect the HTML form to the lambda function. When the submit button is clicked it will send the form data to the API that will pass it on to the Lambda function. I created one looking for a POST request; pointed it to the Lambda function I want it to process the data. I had created the Lambda first and ran tests on it to make sure that it would send an email.

The Lambda function, will take the information that’s passed in from the API, place it into an email template with the data from the form. Then it will send out the email. I used a Node JS that I got from an online instruction and altered that.

If you use the below you’ll need to make sure you’re using the region for you “us-east-1” -1 place to change.

The email that you had authorized in SMS: email@email.com – 2 places

In the const this will be everything you’re passing from your form through the API, then pass those into the Body of the email within ‘${}’ elements.

const aws = require(“aws-sdk”);
const ses = new aws.SES({ region: “us-east-1” });
exports.handler = async function (event) {
  console.log(‘EVENT: ‘, event)
 // Extract the properties from the event body
  const { senderEmail, senderName, senderPhone, yrsCollect, message } = JSON.parse(event.body)
  const params = {
    Destination: {
      ToAddresses: [“email@email.com”], //change this to your email
    },
// Interpolate the data in the strings to send
    Message: {
      Body: {
        Text: {
            Data: `You just got a message from ${senderName}
            Email: ${senderEmail}:
            Telephone: ${senderPhone}
            Years Collecting: ${yrsCollect}
            Message: ${message}`
        },
      },
      Subject: { Data: `Message from ${senderName}` },
    },
    Source: ” email@email.com “, //change this to your email
  };
  return ses.sendEmail(params).promise()
};

HTML:

In the HTML for the form submission:
Have the submit button with a type=”submit”
In the script:

// Email call
  const form = document.querySelector("form");
  form.addEventListener("submit", (event) => {
  // prevent the form submit from refreshing the page
  event.preventDefault();

const { name, email, tel, collecting, message } = event.target;
// Use your API endpoint URL you copied from the previous step
  const endpoint = "https://YourApiCallFromAwsGoesHere"; 
//Invoke URL from the API Gateway page
// We use JSON.stringify here so the data can be sent as a string via HTTP
const body = JSON.stringify({
//These are the name you’ll pass to the Lambda function:value from form
    senderName: name.value, 
    senderEmail: email.value,
    senderPhone: tel.value,
    yrsCollect: collecting.value,
    message: message.value
  });
  const requestOptions = {
    method: "POST", //type of request to API
    body
  };
  fetch(endpoint, requestOptions)
    .then((response) => {
      if (!response.ok) throw new Error("Error in fetch");
      return response.json();
    })
    .then((response) => {
      document.getElementById("result-text").innerText =
      "Email sent successfully!";
    })
    .catch((error) => {
      document.getElementById("result-text").innerText =
      "An unkown error occured.";
    });
});

After this is testing and configuring setting to be more in line with what. You want the email to look like that you receive.

Related Articles

AI as your assistant

AI as your assistant

With all the talk of AI will be taking your job and articles like you don’t need to learn coding AI will do it all for you. I’ve been playing around with AI, decided to try to see how much of what AI can be done for me. I use AI generical throughout the post and not...

read more
HTML with JavaScript contact form

HTML with JavaScript contact form

Link to the form: https://www.lynnamacher.com/pdf/contactForm_V1.html This is created to be basic test for an AWS contact form test. The full form when filled out will send an email through AWS to the site owner. Instead of creating the normal test form I try to...

read more
Save Illustrator for SVG to use in HTML page

Save Illustrator for SVG to use in HTML page

When working with the AWS contact form, I had created a graphic in Illustrator. You can see the post here. With this test form I wanted to have everything in one HTML file this way it’s just one file to upload and update when needed without making sure the other files...

read more

Pin It on Pinterest

Share This