How to Setup an Email Submit Form Using JavaScript

api gateway

Often you have a website you set up that you want people to be able to email, from the site itself.

If you're on AWS (Amazon Web Services), the cheapest way to get contact form functionality (especially with multiple side projects) is to use AWS' API Gateway to set up an API, and DynamoDB for a database, using a Lambda function in the API to save to the database.

The flow is illustrated above - from your web app (in the browser), to the API gateway, to the Lambda function, to the DynamoDB database.

For the API, you need go to API Gateway and set it up to accept POST requests.

Enable CORS so users from anywhere can make this post request - that is, submit email addresses to be stored in your database.

Then you need to write a Lambda function that will be invoked by this Lambda function on every upload.

Basically it will react when a new post request arrives, by saving the information in that post request to your database.

The Lambda function code I used is shown below:

index.js code

You will need to write this Lambda function first, and then configure your API gateway to use this on every invocation.

You'll also need to create a DynamoDB table, to be the destination.

In this example, mine is called MessageHolder. So you'd need to create a MessageHolder DB.

After you've set up the above, create a JavaScript submit form, where you make post requests on clicking button.

Basically, every time the user clicks submit, your form should take the data the user uploaded, and submit it by post request via the API endpoints created when you created your API gateway endpoints.

Here is example JavaScript code which does exactly this.

It's confirmed to work: actually I use it, with the only difference being the changed endpoint (the one in the code is fake).

React form JS code

This solution probably costs less than a dollar a month. It's extremely cheap, and it'll last forever (no software updates needed).

Whenever you want to see how many emails you've gotten, check the AWS console, for the name of your database. Click on it to see how many entries are in your database.

No new entries - no messages. New entries - new messages. Simple!

If you wanted to secure your API endpoint against bad actors and spurious requests, you can use a WAF policy.

AWS documentation

If you're not on AWS, then this, roughly, is how you could do the same thing on GCP, Google Cloud Platform.

You'd begin by setting up an API proxy, basically the GCP version of API gateway. Its job is to make sure that the requests are coming from the right domain.

If there are, it invokes a cloud function which inserts that information in Firestore, GCP's go-to database for web development (among other things).

Another GCP function could listen to `create` doc events on the collection, and send welcome emails to users, instantaneously

That's roughly how you do it, though I haven't tried it personally (this information came courtesy of @viggy28 - give him a follow).

Platforms aside, if you're using React, the form will look practically the same - that will be unchanged.

And once you have a form for 1 website, confirmed to be working, you can copy and paste the code into all your other projects, too.

And there you have it: a portable, reuseable form you can use everywhere.