Image for post
Image for post
Credit: Photo by Annie Spratt

Sending Form Data with ReactJS + NodeJS/Express + Amazon SES

Unless you have been living under a rock for the last decade, you’ve probably heard about this service called AWS by Amazon. It stands for Amazon Web Services — a comprehensive suite of cloud platform services in which you will continually be amazed at finding new uses for.

It literally has services for just about everything a Software Engineer would want when it comes to cloud platform tooling. I have just recently discovered one of those services, Amazon’s Simple Email Service (SES), whilst searching for alternative ways to send data from a web form to an email address via NodeJS, and I’m here to share with you how to achieve it.

The Requirement

I wanted to simply build a web form that captured the user’s name, email and enquiry message, allow them to post this data to a NodeJS end-point which would notify me (and others) via email. For clarity, I’ve broken the requirement into a few layers which we will tackle one-by-one, starting from the AWS set-up through to the actual UI where users will enter the data:

  • Set up Amazon SES

Set up Amazon SES

(This step assumes that you have already set up an AWS account)

Head over to the AWS dashboard to set up access to Amazon SES. To do this, we will need to do the following:

  • Create an IAM user with SES access

Create an IAM user with SES access

  1. Go to the IAM Dashboard. We need to add a user with permissions to access SES and request to send the email
Image for post
Image for post

2. Click Users from the sidebar and click Add user

Image for post
Image for post

3. Enter your desired username and check the Access type checkbox as Programmatic access. Click Next: Permissions

Image for post
Image for post

4. Click the Attach existing policies directly tab

Image for post
Image for post

5. Enter “SES” in the search field and check the AmazonSESFullAccess policy name checkbox. Click Next: Review

Image for post
Image for post

6. Ensure your user details are correct, with the correct policies attached. Click Create user

Image for post
Image for post

7. Your user has now been created and you are provided with an Access key ID and a Secret access key. IMPORTANT: Note both of these down now, as you will need them later and won't be able to retrieve the Secret access key again!

Image for post
Image for post

Add your access key id and secret access key to your local environment

Adding your access key id and secret access key to your local environment will allow you to trigger emails sent from your local development environment on your machine, rather than having to deploy to a server:

  1. Open your terminal

2. Create a credentials file inside your home’s .aws directory (create it if you do not have one):

touch ~/.aws/credentials

3. Edit the credentials file using VIM:

vi ~/.aws/credentials

4. Add the following to your file and save (making sure to replace the aws_access_key_id and aws_secret_access_key values with the ones you noted down earlier):

[default] 
aws_access_key_id = [ENTER YOUR ACCESS KEY ID HERE] aws_secret_access_key = [ENTER YOUR SECRET ACCESS KEY HERE]

Add and verify an email within SES

The final step is to add and verify an email within SES. This email will be used to send the form data on the behalf of your users, which in this case is essentially the same as sending an email to yourself. The benefit of this is that you utilise your own email provider’s (e.g Gmail) service to send user submitted data to yourself and others.

  1. Go to the Amazon SES dashboard
Image for post
Image for post

2. Click Email Addresses in the sidebar to display a list of email address identities. Click Verify a New Email Address

Image for post
Image for post

3. You will be prompted to enter an email address. This is the email that will be used to send user-submitted data, so keep note of the email address you specify here. Click Verify This Email Address.

Image for post
Image for post

4. This will send a verification email to that address where you simply need to click a link to verify

Image for post
Image for post

Use AWS SDK to send emails via SES

Now that we are set up on AWS to use Amazon SES, let’s dive into the code and build the mailing functionality using the AWS SDK.

Add the aws-sdk as a dependency:

npm install aws-sdk

Create a new mailer.js file. This file will contain the Amazon SES integration required to compose and send an email. Import the aws-sdk dependency:

We are going to send a HTML email in this example, so let’s create a small helper function that takes data from our form and returns a string with HTML formatting:

Next, let’s create a sendMail function which takes a sender email address, an array of receivers and the actual form data itself:

That completes our app’s integration side with Amazon SES — simple! We now have a function that will take the form data and compose a HTML email to send to a list of receivers using a specified email address as the sender.

Note: View the entire file here

Create an end-point

To create our end-point, we’re going to use NodeJS and Express. Express is a powerful, minimalist framework for NodeJS which provides a nice and simple way for us to create an end-point.

First, we need to add express as a dependency:

npm install express

Now let’s create a new server.js file and import some modules we're going to need:

Next, some configuration is needed to set up our Express app, specify a port to run the server on and set your AWS region:

Finally, create the end-point we will use to send requests from the client. It is important to ensure you update the first argument for sendMail (the sender) to the same email you verified in the Amazon SES dashboard. Amazon SES will only allow you to send emails from an email that has been verified:

Note: View the entire file here

Build a ReactJS-based web form

There are a few layers to this part, first; building a helper function for sending data via the FetchAPI, second; providing a way to extract data from the form elements into an object we can send via a request, and third; building the UI form elements to allow users to input data.

POST-ing with FetchAPI

Create a helper function using the Fetch api:

This helper function allows us to send a post request to a server. It takes data as an argument, which is expecting a url property containing the end-point URL to send the request to. Notice how after obtaining the url property we delete it, since we don't actually want to send this in the request payload, it is simply a way for us to pass the endpoint URL and associated request payload as one argument.

Sending form data

Next, we need a way to send the form input data to our yet-to-be-created end-point. We can do this by taking the data from a form element and passing it through to our post helper function. This can be done by adding a small method to our ReactJS component when the user triggers the onSubmit event:

The submitForm method doesn't necessarily need to be part of a ReactJS component, it just needs to be an event handler for the onSubmit event that is fired from the form DOM element. This gives us access to the event's target (in this case, the form) which subsequently allows us to extract all values from the form's inputs.

With our post helper function and submitForm method ready, the one missing piece of client-side functionality is to build the UI where users will submit data.

Form elements

We’re going to need a form to display in the UI, with input fields for name, email and the message. Add an onSubmit event listener which calls our submitForm method and passes through the event.

The above can be achieved using any framework or library of your choice — or none at all — but the fundamentals are the same; we need some input fields and an onSubmit event handler to deal with the submitting of the form.

Note: View the entire file here

Now we have all of the parts in place in respect to our application! We have:

  • A web form that allows users to input data

And that’s it!

We have built a web form, created an end-point, integrated Amazon’s SES API and set up the IAM and SES dashboard that allows us to provide users with a form they can submit and for us to receive that form data by email via Amazon SES!

Written by

Front End Dev | Ex: Amazon, BBC, ITV, HSBC, Barclaycard, RBS | Creator of BreefLeads.com 🚀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store