Build a Contact Form with React and Nodemailer
Tags: node, react
Published: 2020-12-29 02:23:16

---
title: Build a Contact Form with React and Nodemailer
published: true
date: 2020-05-21 19:26:16 UTC
tags: Nodejs,React
canonical_url: https://lo-victoria.com/build-a-contact-form-with-react-and-nodemailer
---

A contact form is essential for any business to provide a convenient way for their customers to reach them. It is typically found in a business' contact us page. In this tutorial, I will show you how to create a contact form with React and Nodemailer.

Some prerequisites needed to follow this tutorial:
- Basic understanding of React, props and states
- Basic understanding of back-end (server-side) programming

### Step 1: Build the Form
You can be creative in how you want to make it. You can use Bootstrap or CSS and it's all up to you! Usually, a contact form has 3 input fields: name, email and message. But for my example, I added a Subject field too. Here's what mine looks like:

![ex](https://cdn.hashnode.com/res/hashnode/image/upload/v1590076290475/2vnvuwHJy.png)

And this is what it looks like in my `contact.js`.
(sorry for the ugly formatting, it looks better on Visual Studio Code I promise):
```
render() {
        return (
            <div className="section">
                <div className="container">
                    <div className="row">
                        <div className="col-md-12">
                            <div className="section-title">
                                <h2 className="title">Contact Us</h2>
                                <p>Let us know what you think! In order to provide better service,
                                     please do not hesitate to give us your feedback. Thank you.</p><hr/>
                                <form id="contact-form" onSubmit={this.submitEmail.bind(this)} 
                                    method="POST">
                                <div className="form-group">
                                <div className="row">
                                <div className="col-md-6">
                                    <input placeholder = "Name"  id="name" type="text" 
                                       className="form-control" required value={this.state.name} 
                                       onChange={this.onNameChange.bind(this)}/>
                                </div>
                                <div className="col-md-6">
                                    <input placeholder = "Email"  id="email" type="email"
                                      className="form-control" aria-describedby="emailHelp"
                                      required value={this.state.email} onChange=
                                      {this.onEmailChange.bind(this)}/>
                                </div>
                                </div>
                                </div>
                                <div className="form-group">
                                    <input placeholder = "Subject"  id="subject" type="text"
                                      className="form-control" required value={this.state.subject}
                                      onChange={this.onSubjectChange.bind(this)}/>
                                </div>
                                <div className="form-group">
                                    <textarea placeholder = "Message"  id="message" 
                                       className="form-control" rows="1" 
                                       required value={this.state.message}
                                       onChange= {this.onMsgChange.bind(this)}/>
                                </div>
                                <button type="submit" className="primary-btn submit">Submit</button>
                                </form>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        );
    }
```
I used Bootstrap and custom CSS styling for my Contact Form. I like how it looks clean and simple!

### Step 2: Adding Handler Functions
Right now, the contact form is nothing but a static page that cannot send emails or anything. We will have to add functions to prepare for the back-end stuff coming later.

First, create the state variables to keep track of the states name, email, subject and message. 
```
class Contact extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          name: '',
          email: '',
          subject:'',
          message: ''
        }
    }
```
Then, let's create the `onChange` events functions to update our state variables when a user changes the value of the 4 input fields. And of course, we have added the `onChange` handler to our input elements in the render function.
```
onNameChange(event) {
        this.setState({name: event.target.value})
    }
    
    onEmailChange(event) {
        this.setState({email: event.target.value})
    }

    onSubjectChange(event) {
        this.setState({subject: event.target.value})
    }
    
    onMsgChange(event) {
        this.setState({message: event.target.value})
    }
```
### Step 3: Submit Email Function
So with the handler functions done, we now have to create a function that executes when the user clicks on the Submit button. 

Upon clicking the Submit button, the `submitEmail()` will send a HTTP POST request to the API. A good npm package called **Axios** can make HTTP requests and automatically transforms JSON data. Run ```npm install axios``` to install the package. Read its documentation [here](https://www.npmjs.com/package/axios) for details.

The submitEmail() function will be as follows:
```
submitEmail(e){
        e.preventDefault();
        axios({
          method: "POST", 
          url:"/send", 
          data:  this.state
        }).then((response)=>{
          if (response.data.status === 'success'){
              alert("Message Sent."); 
              this.resetForm()
          }else if(response.data.status === 'fail'){
              alert("Message failed to send.")
          }
        })
}

resetForm(){
        this.setState({name: '', email: '',subject:'', message: ''})
}
```
### Step 4: Set up Nodemailer
Install the packages needed in one line:
```
npm install express cors nodemailer dotenv
```
Then, create a `server.js` to handle the back-end.

```
const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
require("dotenv").config();
```
In order for Nodemailer to send mails, it needs to have a SMTP which is a protocol used by email hosts such as gmail, hotmail, etc. To set it up:

```
const transporter = nodemailer.createTransport({
  host: "smtp.example.com", //replace with your email provider
  port: 587,
  auth: {
    user: process.env.EMAIL,
    pass: process.env.PASSWORD
  }
});
```
For more info, documentation [here](https://nodemailer.com/smtp/).

Next, verify the SMTP connection using the `verify(callback)`:
```
// verify connection configuration
transporter.verify(function(error, success) {
  if (error) {
    console.log(error);
  } else {
    console.log("Server is ready to take our messages");
  }
});
```
Finally, set up the POST route to send the content of the contact form.
```
app.post('/send', (req, res, next) => {
  var name = req.body.name
  var email = req.body.email
  var subject = req.body.subject
  var message = req.body.message

  var mail = {
    from: name,
    to: // receiver email,
    subject: subject,
    text: message
  }

  transporter.sendMail(mail, (err, data) => {
    if (err) {
      res.json({
        status: 'fail'
      })
    } else {
      res.json({
       status: 'success'
      })
    }
  })
})
```
## Congratulations!
We have built a contact form that can send messages to your specified email!

If you find this tutorial helpful, please feel free to like and share it to anyone who is trying to make a contact form. Cheers!