Submit form and receive Email using Node and Express

Shivangi Singh — Thu, 03 Feb 2022 09:53:50 +0000

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.

github Repo Link

Connect with me on:
Github
LinkedIn

I made my first website which sends response from Html form to my Email.

Shivangi Singh — Sun, 30 Jan 2022 12:57:46 +0000

I made a simple static website which receives response from the user and send them to my email account.

The idea to create this website came from the need of providing free career guidance/counselling to the students of 10th & 12th class.

So I created a simple website using Html, Css and javascript.

The other technologies used in the website were node and express for mailing.

I have used 2 npm package node mailer and nodemailer-mailgun-transport. With the help of these packages I was able to send and receive the mails.

After the completion of the website, I deployed it on Heroku.
Visit the Site

If you liked my idea please share it with students, so they can avail this opportunity.

Follow me on
GitHub
LinkedIn

DEV Community: Shivangi Singh