My last post was about a website that sends form requests from html form to my email account and in this post, I'll provide step by step, code along process of achieving this.
Prerequisites
In this tutorial, I'll use Nodejs and Expressjs, so a basic understanding of them will work.
Now let's get started!
Basic Setup
In a completely new folder initialize the package.json file by opening the terminal or bash and write the command npm init -y
Now install the packages, for sending the emails I am using nodemailer and nodemailer-mailgun-transport will be the transporter.
To install run the command: npm i express nodemailer nodemailer-mailgun-transport
Now let's discuss how they work together in sending and receiving the mail with the express app.
Nodemailer It is a Nodejs module for sending emails with SMTP or any other transporter mechanism.
So the next step will be creating a Nodemailer transporter using either SMTP or some other transport mechanism.
nodemailer-mailgun-transport It is a transport layer to allow sending emails using Nodemailer and using the Mailgun API instead of the SMTP protocol.
I'll describe how to use it in the code below.
But if you are curious about how these packages work, visit the following links.
npm nodemailer
npm nodemailer-transport
Express Setup
Make an app.js file and in this file first, we will require express and set a basic setup.
In the res.sendFile we need to send our Html file, to send that file, firstly we will create a views folder and add index.html file in that.
I have added a simple form you can add fields according to your requirements.
Now we will configure the Html file and add it to the sendFile.
To do that I'll use the command.
path.join(__dirname, 'views', 'index.html')
It will send the request to the path of Html file we added.
Making the Http request:
We are done with the basic setup, so let's write a simple code to send an Http request. I will use fetch API to make the request.
We will listen to the submit event on the form, disable the browser's default behavior and take the data entered by the user then send it to the path where the post request is waiting to receive that data.
After doing this we will try running the code and see if we receive the data in the terminal.
Open your terminal and run the command node app.js to run the file, you should be able to see the output in the terminal.
Mailgun
We will use the mailgun API to receive the mails in our inbox.
You need to first make your account and log in, after login you can get your domain name and your API key in your dashboard. And also validate yourself by adding your email account in which you want to receive the mails.
Mailgun
Completing the mailing process
Now we will make a mail.js file.
In this file, we will write the code for sending the emails.
First, include the 2 packages we installed in the beginning.
Nodemailer and Nodemailer-mailgun-transport.
Now to complete the process of sending the mail we need to add the auth which contains your API key and domain name from your mailgun account. After that, we will create the transport and then use the sendMail function to send the details.
We are very close to completing the process. The data we are sending from the mail.js file should contain the information user entered in the form and to do that we just need to add this data in our sendMail function and to do that we will use the post request where we are receiving this data, then pass this info to the sendMail function. To achieve that we will make some changes to our sendMail function so we can add the fields dynamically.
Now we will import this function in our app.js file. In the post request, we will destructure the values from the req.body and then add them to our sendMail function with our callback function.
Now you should be able to send the mail and receive it in your inbox. Run your app.js file and see if you get the mail and yes check your spam folder too.
Completed
Now we are finally done with the work. You can use this in your projects to make your web apps interactive. If you get stuck in between don't worry I'll attach the GitHub link down.
Top comments (0)