DEV Community 👩‍💻👨‍💻

Cover image for How to send emails using form data in React application without a backend ( server ).
Abdul Waqar
Abdul Waqar

Posted on • Updated on

How to send emails using form data in React application without a backend ( server ).

How to Send Email From React Client using Emailjs Library

If you have contact form in your Website and you want to receive email when user submit data via contact form then you can learn in this tutorial how to send email with data received from contact form.

Video Tutorial in Hindi / Urdu

To Follow this tutorial you need to familiar with ReactJS a Javascript Lirbary to build UI and we will need EmailJS account if you are not familiear with EmailJS then no problem we will also learn about Emailjs.

  • Step: 01

Create a simple React Application so we will use create-react-app to create a react application.

npx create-react-app email-client

  • Step: 02

Create a simple form to get data from user. I am using Bootstrap CDN to create contact form.

Create 4 Text Fields FirstName ,LastName , Adress and Message. Copy this code in your App.js file.

  import React, { useRef } from "react";
  import emailjs, { init } from "@emailjs/browser";
  function App() {
    const handleSubmit = (e) => {
      e.preventDefault();
    };
    return (
      <div className="container">
        <form onSubmit={handleSubmit}>
          <h1 className="text-center">Registration Form</h1>
          <div className="form-row">
            <div className="form-group col-md-6">
              <label htmlFor="First Name">First Name</label>
              <input type="text" className="form-control" name="firstname" />
            </div>
            <div className="form-group col-md-6">
              <label htmlFor="Last Name">Last Name</label>
              <input type="text" className="form-control" name="lastname" />
            </div>
            <div className="form-group col-12">
              <label htmlFor="inputAddress">Address</label>
              <input
                type="text"
                className="form-control"
                id="inputAddress"
                placeholder="1234 Main St"
                name="user_address"
              />
            </div>
            <div className="form-group col-md-6">
              <label htmlFor="message">message</label>
              <textarea
                type="text"
                className="form-control"
                id="inputmessage4"
                name="user_message"
              />
            </div>
          </div>

          <button type="submit" className="btn btn-primary">
            Sign in
          </button>
        </form>
      </div>
    );
  }
  export default App;
Enter fullscreen mode Exit fullscreen mode
  • Step: 03

After saving this file run your dev server by running

npm start

Now we have created our form component. Now Create EmailJS account , create email template and get USERID , TEMPLATEID and USERID.

Goto https://www.emailjs.com and register your account. After registration goto Email Templates
from navigation menu and create Email Template and update it according your requirements. We are sending FristName , LastName , Address and user_message from contact form. We will use these variables in our template using double curly braces like this {firstname}. See ScreenShot =>

  • Now get Email template ID from Email Templates option:

Image description

  • Get Service ID from Email Service option :

Image description

  • Get UserID and User ID which we will use with init method of emailjs :

Image description

Now update our code in ./App.js

import emailjs and { init } at top of component and create a ref to our form. Using ref we will access data of text fields.
and update onSubmit method of form to send Email like this :

import React, { useRef } from "react";
import emailjs, { init } from "@emailjs/browser";

function App() {
  init("user_xxxxxxxxxxxxxxxxxxx");
  const form = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    emailjs.sendForm("SERVICE_D", "TEMPLAE_ID", form.current, "USER_ID").then(
      (result) => {
        alert("Message Sent Successfully");
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  };
  return (
    <div className="container">
      <form onSubmit={handleSubmit} ref={form}>
        <h1 className="text-center">Registration Form</h1>
        <div className="form-row">
          <div className="form-group col-md-6">
            <label htmlFor="First Name">First Name</label>
            <input type="text" className="form-control" name="firstname" />
          </div>
          <div className="form-group col-md-6">
            <label htmlFor="Last Name">Last Name</label>
            <input type="text" className="form-control" name="lastname" />
          </div>
          <div className="form-group col-12">
            <label htmlFor="inputAddress">Address</label>
            <input
              type="text"
              className="form-control"
              id="inputAddress"
              placeholder="1234 Main St"
              name="user_address"
            />
          </div>
          <div className="form-group col-md-6">
            <label htmlFor="message">message</label>
            <textarea
              type="text"
              className="form-control"
              id="inputmessage4"
              name="user_message"
            />
          </div>
        </div>

        <button type="submit" className="btn btn-primary">
          Sign in
        </button>
      </form>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Now Start your application and Try submitting from. You will receive an email that we defined email template.

Congratulations ! Now You Can receive Emails when a user submit A Contact Form.

You can find Complete code of this tutorial at Github Email-Sending-Tutorial

TWITTER

Facebook

Top comments (2)

Collapse
 
xr0master profile image
Sergey Khomushin

Thanks for your detailed article!

Collapse
 
abdulwaqar844 profile image
Abdul Waqar Author

I appreciate it, you liked it.

🌙 Dark Mode?!

Turn it on in Settings