Build a “Send Me a Message” Component for Your Site

Create a simple React component to allow users to message you directly from your site

Ryan Gleason
Feb 24 · 5 min read
Photo by Adam Solomon on Unsplash

Have you ever wondered how you can enable users to send you a message directly from your website? It seems a bit complicated, doesn’t it?

I am here to tell you that it is truly simple. We just need to put a couple of already existing pieces together and tailor it to our liking.


Objective

The final product is below:

And from the email perspective:


Tools We Will Be Using

  • Express.js — A web application framework for Node.js. Allows us to get our application up and running very quickly.
  • React — The front-end library that we will be using to create the form.
  • Bootstrap and reactstrap — UI libraries that help us quickly create beautiful components.

Environment Setup


Getting Started

Easy enough, right? Let’s get to it.


Layout Our Directory Structure

You will see that we have server.js for our Express back end and everything in the client directory for our React front end.

In our src folder, we are adding one component: InputForm.js. And as the name implies, it will be our form component.


Create Our Form

Run the following command to install reactstrap and bootstrap. These libraries will assist us in making a pretty form component.

npm i --save reactstrap bootstrap

And add the following line to your index.js:

import "bootstrap/dist/css/bootstrap.min.css";

Below is the code we will use for our form in a component called InputForm.js.

If you want a more detailed explanation of how I created this form using React Hooks, you can view this article: Easily Create a Form With React Hooks.

InputForm.js

And then for completion’s sake, here is App.js:

App.js

Run npm start and you should see the form below at localhost:3000:


Set Up Our Back End

Install the following modules (for the back end):

npm i --save nodemailer express cors

I will post the code below and then walk you through why each line is necessary.

server.js
  • Line 3: We will be hosting our back end on port 5000 and our front end on port 3000 (as this is the default for React).
  • Line 5: A config file housing our credentials. A straightforward file called config.js at the same level as our server.js file. It looks like this:
module.exports = {
USER: "enteryouremailaddresshere@gmail.com",
PASS: "enteryourpasswordhere"
};
  • Line 6: To allow our two servers to talk to each other, we need to enable a CORS policy.
  • Line 8: We are allowing our app to use the CORS policy of all origins. For more information on how to be more selective with the policy you choose, visit the cors documentation on npm.
  • Lines 9 and 10: Application setup for Express.
  • Lines 12-18: nodemailer requires you to create a transport to connect to an SMTP server. It is here we determine which service we will be using (ex: Gmail) and provide our credentials to sign in.
  • Lines 20-26: We sign in to our account. If you are having trouble signing in (SSL error), you need to enable your Gmail account to send from third-party applications. Click this link and turn it to ON. I recommend turning it off when you’re not using this. Or perhaps create a test email.
  • Lines 28-46: Our POST route definition. This code is what happens on the back end when we receive the axios request from our front end.
  • You’ll see that in lines 29 and 30, we are taking the parameters from our request.
  • Lines 32-36: We are creating our actual email message. You can see how each field here maps to a different part of an email.
  • Lines 39-45: Generate the response to send back to our front end. It will determine whether or not the message went through and then on our front end, we can see if (res.dat.msg === ‘suc’) then log “Email has been sent”, otherwise, return FAILURE.

Send an Email!

And an email in your inbox that looks similar to this:

And voila! We are now sending emails programmatically using nodemailer.


Review

  • Set up a full-stack Node.js application with React on the front end.
  • Created a form using React.
  • Setup an API route on the back end to handle the request from the front end.
  • Sent an email.

And, as promised, here is a link to the GitHub repo.

Thank you very much for reading! If you have any questions, comments, or concerns, feel free to leave a comment.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Ryan Gleason

Written by

Giving back to the dev community one article at a time!

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade