Over the last weekend I worked to get a basic working version of 2 features for a HTML website forms to process through AWS. Those are proof of concepts (POC) to make sure that I can make them and write down the basic instructions for myself and notes of what to look at doing different next time. At the end remove all the resources I created to make sure no extra costs, other than the testing show up. With how small these tests are good chance no charges would happen.
HTML contact form to send email to website owner:
The purpose: With most website contact forms you’ll need a way to have that form go to the website owners’ email for them to do something. In the 90’s that was sometimes just a click submit to have an email people up on the client’s computer then they send. Those don’t work so well now with web mail, security concerns with popups this method doesn’t work very well.
If I need to build out an HTML site, I’ve mostly been doing WordPress and it has its own email out features and have to have a contact form I can use AWS for this functionality. The other options would be purchasing some other service or add on to the web hosting, these two methods can have issues the third-party vendor shuts down, you need to move hosting, etc. With the other services there is a monthly/yearly charge for them while AWS would be charging just for use, and contact forms usually don’t get that much usage. If it turns out the forms would get lots of traffic then you would need to look at another service, no idea at this time on what that number would need to be.
To build out this POC I used Free Code Camp’s instruction:
The form submit button connects to an AWS API, you create, that triggers a lambda function, that sends the data to AWS’s Simple Email System (SES).
Couple of things I noticed that I’ll need to watch for in their instructions:
Where you update the code for the email deployment, make sure to update with your confirmed SES email. The part at the end where you put the JavaScript on your page with the API you don’t have use the ‘<’ ‘>’. They don’t say where you should put your script, I added to the bottom of the form, this is normal if you want to make sure the page is fully loaded before having the script run. If I was going to do this for a live form, I would look at making the script into a server side or set the API to only accept traffic from that site/page. This way if somebody pulls the API or copies the page to use for their own site and they don’t understand the coding you won’t be getting comments from somewhere else and getting charged for those.
To add more elements to the form so they connect with the Lambda function name the label and input with an unique name, such as ‘telephone’. Then in the HTML JavaScript add it in the “const {..ADD IN HERE…} = event.target” and then in the “const body” a value to pass like “phone: telephone.value” and watch your JSON it only needs a comma after it if it’s not the last item on the list.
In lambda you’ll need to add those new elements to be passed, they are the names on the left of the ‘:’. Such as “const { senderEmail, senderName, message, phone }”. Then in the Body/Text area add in the new passed in info as you need such as:
“Data: `You just got a message from ${senderName} – ${senderEmail}:
Phone #: ${phone}
${message}`”
Saving HTML form data to a Database
The Purpose: If the site would be offering an email, newsletter, marketing, etc. this way can pull the emails from the database and if there is any conditional needed. An example of this is you’re running a pet store and they marked they have a dog you can use that in sending the email to have dog products being more focused in the email. The other option would have it emailed like the contact form then have whoever is monitoring the contact form to add that person to email list, this is time consuming and could be missed. Other services offer this service, again at an ongoing charge, usually per number of emails to be sent a month.
Used instructions from this site for my POC:
https://sonsuzdesign.blog/2022/11/13/building-a-simple-web-application-using-aws/
I created the save to database for a form.
To add more to the form, in the form section add same from the form to email instruction above; in the JavaScript, add to this line: “JSON.stringify({“firstname”:fname,”lastname”:lname,” phone”: telephone}”
In lambda function inside ‘Item’
“
‘ID’: name,
‘Phone’: phone,
‘LatestGreetingTime’:now
”
If needed in future I would merge the 2 into one, but keep 2 different lambda functions, there might be the need for a contact with sign up for a newsletter and then a separate form to sign up for the email. Setting that up to have the code check incoming if subscribe is checked to save to database and have SES send a confirmation email to the person who has signed up.
Then check if message is not blank to send the email to website owner, this way keeping 1 API but not having emails going out for people signing up for the newsletter, which wouldn’t be needed.
These are working notes and might not be the best setup. Fully research security risks and setup ideas before implementing your own solution.
