How to send email from my react web application

Question

i have a single email input field and a button in my app. once i enter the email and click send i would like to send an email with the value entered in the input. i know it

Answer 1

You can set up an account on an SMTP server which you can call with your React code.

This tutorial runs over how to do that with the emailJS SMTP server, which allows you to send 200 free emails/month(in case free is a priority). I'll summarize because they didn't cover everything I wanted.

---

Step1

Install emailJS via

npm install emailjs-com

or

yarn add emailjs-com

Source

If you are using create-react-app please view the tutorial I mentioned above or this linked source, where they provide instructions on how to include emailJS with create-react-app

Step 2

This is a code example of a form which sends an email using emailJS, You must replace 'YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', and 'YOUR_USER_ID' with your actual id's(which I will explain where to find in later steps)

import React from 'react';
import emailjs from 'emailjs-com';

export default function ContactUs() {

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior) 
      }, (error) => {
          console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="from_name" />
      <label>Email</label>
      <input type="email" name="from_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="html_message" />
      <input type="submit" value="Send" />
    </form>
  );
}

Source (I made some adjustments)

Step 3

Set up an account at https://www.emailjs.com/

Step 4

Connect an email by adding a service, in this case I used gmail.

If you use gmail then 'YOUR_SERVICE_ID'(step 2) should be replaced with 'gmail'

Step 5

Create a a template by clicking Email Templates in the side nav and selecting create new template. This will create an email outline and give you a template id

You should replace 'YOUR_TEMPLATE_ID'(step 2) with this template id

Here is an example Email template

Step 6

You can find your userID by going to Account -> APIKeys

Replace 'YOUR_USER_ID'(step 2) with this userID

---

And in case you don't want spam emails, add Captcha

Answer 2

React is only used for front end purpose so it is not only enough to send email.

But you can send email from client usingsome external API, like Mailjet, Gmail Api etc

Answer 3

From frontend only you can trigger mails using smtpJS go to thi link smtpJS

Steps to follow is 1. Click GetSMTPCredentials and register. 2. After registering, note down the credentials and click ENCRYPTSMTPCrendentials

A sample would be as follows

var test={
sendEmail(subject,to,body){

    /* SmtpJS.com - v3.0.0 */
    let Email = { send: function (a) { return new Promise(function (n, e) { a.nocache = Math.floor(1e6 * Math.random() + 1), a.Action = "Send"; var t = JSON.stringify(a); Email.ajaxPost("https://smtpjs.com/v3/smtpjs.aspx?", t, function (e) { n(e) }) }) }, ajaxPost: function (e, n, t) { var a = Email.createCORSRequest("POST", e); a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.onload = function () { var e = a.responseText; null != t && t(e) }, a.send(n) }, ajax: function (e, n) { var t = Email.createCORSRequest("GET", e); t.onload = function () { var e = t.responseText; null != n && n(e) }, t.send() }, createCORSRequest: function (e, n) { var t = new XMLHttpRequest; return "withCredentials" in t ? t.open(e, n, !0) : "undefined" != typeof XDomainRequest ? (t = new XDomainRequest).open(e, n) : t = null, t } };

    Email.send({
        SecureToken : process.env.SECURE_TOKEN, // write your secure token
        To : to, // to include multiple emails you need to mention an array
        From : process.env.EMAIL_HOST,
        Subject : subject,
        Body : body
    })
    .then(message=>{
        // alert(message);
    });


}
}

 export default test;

you can import above js file like below and call the method

import test from '../../components/sendEmail'
test.sendEmail("sub","msg");