Photo by Miles Burke on Unsplash

Build a Contact Form with React Bootstrap, Express.js & Nodemailer

I was trying to pull this last piece together for my personal website, and I was trying to integrate all these new pieces of React that I had not quite tested or mastered yet. The information is definitely out there, but it exists in a lot of different places. So, with this blog, I’d like to compile the information here for those who are curious.

The Front End: React with Bootstrap

It has been awesome to learn React with Bootstrap. Documentation for that exists here.

The Form

First we need to import the pieces we need from React Bootstrap:

Then we create a functional component, returning the pieces that we need. By importing Form, we also have access to Form.Group and Form.Label, etc.

Add State

Now we want to add state, and in this case I wanted to learn hooks. However, those using local state looks like so:

Using hooks, here is state:

Add Event Handlers

Now let’s add our event handlers. With normal state, we would see a handler like so:

Using hooks, our event handler looks a bit different, but it’s nice to see them side-by-side as they are very similar — and can be built using one function that will change as the user types inputs (instead of creating one per input).

Add Properties and Event Handlers to Our React Bootstrap Form

I have three inputs for my contact form — name, email, and message. Here’s our first input NAME:

Notice that the only big difference here if you were not using hooks would be that the value would be set to I will also paste code if you were to write out this piece using HTML with regular bootstrap so you can see that difference:

Handle Submit

Now let’s handle the submission of the form. Without hooks, here is the handle submit function:

With hooks, here is the handle submit function, at it’s bare bones:

Add a BackEnd to Handle the Submission

Now we need to create a backend for our contact form. There are a lot of different ways to handle this, but in this case I wanted to see if I could do it. I found an article using Express.js and NodeMailer.

Create a new workspace and run:

Then install NodeMailer:

Create a config.js file and input:

I used my Google email and password because I wanted all responses to go there, and there are issues with that that I can discuss later.

Create an index.js file and input:

After these changes are customized, we still need to deal with a few other things.

I created a .gitignore file, and added my config.js file to that, so my passwords won’t not be uploaded for my git commit. The .gitignore file includes:

To start the server run:

Dealing with the Gmail error

When I ran node index.js to start the backend, it gave me a GMAIL error that my user and password was incorrect. After double checking it I realized that it was trying to block my app from signing in. To get it to work — I had to:

  1. Go to my account
  2. Click on my profile circle, click Manage Your Google Account
  3. Click Security on the left
  4. Turn ON Less Secure App Access

Then try running the server again. If it’s connected it will console log “Server is ready to take messages”

Connect the Backend to the Front React App

Now to connect our contact form to the backend. We are sending a post request, creating an alert to let our user know the message was sent, and then resetting the form. Here is the code:

Finally…Test it.

Make sure you start your front end server — go to the new contact page — and send yourself a message to see if it is working.

Further Steps

I definitely would love to see how to make my application work without having to turn on the less secure apps in gmail. I imagine it has to do with setting up OAuth on the backend. That’s another blog for another day.

Code on! ~Kelsey

Full Stack Software Engineer, Administrator, Designer, and Musician.