Here we will implement a request access feature for our demo application. When a users can go into our application they can fill the form with name email and message, and submit it. We will configure and send that particular form data directly into our desired email.
For the form we will implement it using React hooks alongside with Tailwind CSS. Let’s take a look at the form we will be making.
Let’s start by creating a component for our form. Here we will make a component and use our tailwind to spice up the styles and make necessary imports and changes to make it look something like we have above. After the necessary changes our requestAccess.js component looks like below
Here we have just added some styles that we have imported from Tailwind to make our UI look more better. We will now move ahead to make the use of
useState hook in React to hook up our values that we have in our input fields. After that we just add our API route that we will be creating later to the URL endpoint with the help of native fetch method.
Here in the code we just added our asynchronous function to
onSubmit handler which ultimately hits our API endpoint we will make for our backend with the message and the email.
In our backend we will be creating a simple server which will receive our object sent from our react app and trigger an email to the desired person with the details filled in UI. For this we will be using
nodeMailer. Before we will start writing lets import our necessary packages we will use
yarn add express nodemailer nodemon
Express is our framework of choice which is totally easy to get started. Nodemailer is the library we will be using sending emails to the desired address and
nodemon to restart our server when we make changes to our code. Now lets create app.js file, where we will write all our code (We wont be creating a separate route neither .env files for simplicity and ease).
We will now import our desired packages here and create a SMTP protocol in order for Nodemailer to send mails. This protocol is used by email hosts such as gmail, hotmail etc.
Next, we will verify SMTP connection using the verify callback. And we will log our errors in console as well.
Finally, we can add our POST route to send the content of the form that are filled in the UI. After all this are set we can have our working mini application which sends us email with the data filled for our Application UI. Lets take look at the final code we have here
You have just built a form that can send message to out desired email address. This is one of the most common feature inside our application. We can tweak and make this much better if needed as well. You can also find the code in the repository here.
Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!