Build an Advanced Contact Form in React with Nodemailer

A contact form allows website visitors to send messages, but you can make it more useful with validation, error handling, and email integration. In this 2023 updated tutorial, I’ll show you how to build an advanced React contact form integrated with Nodemailer to email submissions to yourself.

Overview

Here's what our contact form will do:

Accept name, email, subject, and message inputs
Validate fields to ensure proper inputs
Display error messages for invalid fields
Send an email with form data to your email
Display success or error message after submitting
Reset to initial state after submit

We'll use the latest version of React for the frontend form and Nodemailer for sending emails from the Express backend.

Use Cases

This contact form has a variety of use cases:
Business Website
Add to a "Contact Us" page so potential customers can inquire about your business. Email questions directly to your sales team.
Support Site
Include on a SaaS app support site for users to report issues or ask for help. Messages go to your support team mailbox.
Landing Pages
Embed on a landing page to capture leads. Add name and email validation to gather more info on signups.
The built-in validation and spam filtering also improve the quality of submissions by preventing bogus form entries. With the Nodemailer backend, messages safely reach the appropriate team's email, ready to respond to users.
With some styling customizations, this form can fit seamlessly into any site to accept visitor messages. Try integrating it into your projects!

Set Up React App

Create a React app:

npx create-react-app my-contact-form
cd my-contact-form
npm start

Build the contact form component in App.js:

Custom hooks to manage form state
Input change handlers to update the state
Validation and error messaging
Handle form submission with Axios ## Create the Form UI

Design the form UI with:

Name, Email, Subject, Message inputs
Submit button

Use a custom hook to initialize and manage state:


    function useForm() {
      const [name, setName] = useState('');

      // input change handler
      const handleNameChange = e => {
        setName(e.target.value);
      }

      // additional form state and handlers

      return {
         name,
         handleNameChange
        // ...
      };
    }

Add Validation

To validate:

Check required fields are not empty
Validate email format

Show error message if invalid:

    {errors.name && <p>Name required</p>}

Add logic to check the validity of input change and submit. Clear errors when fixed.

Submit Form Data

Submit handler:

Prevent default event
Check the form validity
POST data to API endpoint

    const submitForm = async e => {
      e.preventDefault();

      if(isValid) {
        try {
          await axios.post('/api/contact', {
            name, 
            email  
          });
          showSuccess();
        } catch(err) {
          showError();
        }
      } 
    }

Nodemailer Backend

Install Express, Nodemailer, and middlewares:

npm install express nodemailer cors dotenv

Configure credentials and transporter:

    const transporter = nodemailer.createTransport({
      service: 'Gmail',
      auth: { 
        user: process.env.EMAIL,
        pass: process.env.PASSWORD
      }
    });

POST route to send mail:

    app.post('/api/contact', (req, res) => {
      const { name, email, message } = req.body;

      const mailOptions = {
        from: name + ' <' + email + '>',
        replyTo: email,
        // email fields
      };

      transporter.sendMail(mailOptions, (err, data) => {
        // return response
      });
    });

Display Submission Messages

Handle success and error API responses in React.
On success:

Show a "Thank you" message
Clear form state

On error:

Show the "Error - please try again" message

    {message && <p>{message}</p>}

    <button onClick={clearMessage}>Ok</button>

And we have an advanced, validated contact form integrated with email!
Some ideas for future improvement:

Additional field validation
Captcha/spam filtering
Save messages to a database
Automated confirmation email reply

Conclusion

In this tutorial, we built an advanced React contact form with validation and integrated email capabilities using Nodemailer.
Some key points:

The form accepts user name, email, subject, and message inputs
Client and server-side validation ensure correct user inputs
Submitted messages are emailed to you via Nodemailer transporter
Users see success/error messages after form submission
Everything resets after the message is sent

Overall, this creates a smooth contact form experience for visitors to contact you while validating info and directly sending messages to your email inbox.

If you like my work and want to help me continue dropping content like this, buy me a cup of coffee.

If you find this post exciting, find more exciting posts on Learnhub Blog; we write everything tech from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain.

Blog

Build an Advanced Contact Form in React with Nodemailer

Scofield Idehen