React.js with EmailJS

EmailJS

npm create-react-app frontend
npm install emailjs-com

EmailJS Setup

Back to Coding

import React from "react";function Form(){return(<div className="form"><div className="formDiv"><label htmlFor="">Name</label><br /><input type="text" placeholder="name" /><br /><label htmlFor="">Email Address</label><br /><input type="email" placeholder="email" /><br /><label htmlFor="">Message</label><br /><textarea name="" placeholder="message" id="" cols="30" rows="20"></textarea><button>Send</button></div></div>);}export default Form;
import React, { useState } from "react";function Form(){var [name, setName] = useState("");var [email, setEmail] = useState("");var [message, setMessage] = useState("");var [status, setStatus] = useState("");var [warning, setWarning] = useState("");function send(){const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;if(name==="" || email==="" || message===""){setWarning("Please fill all the fields");}else{if(re.test(String(email).toLowerCase())){setStatus("All set")}else{setWarning("Invalid Email address");}}}return(<div className="form"><div className="formDiv"><h1>Send Message</h1><h3>{status}</h3><label htmlFor="">Name</label><br /><input type="text" placeholder="name" onChange={(e)=>{setName(e.target.value); setWarning(""); setStatus("")}} /><br /><label htmlFor="">Email Address</label><br /><input type="email" placeholder="email" onChange={(e)=>{setEmail(e.target.value); setWarning(""); setStatus("")}} /><br /><label htmlFor="">Message</label><br /><textarea name="" placeholder="message" onChange={(e)=>{setMessage(e.target.value); setWarning(""); setStatus("")}} id="" cols="30" rows="20"></textarea><sub>{warning}</sub><br /><button onClick={send}>Send</button></div></div>);}export default Form;
import React, { useState } from "react";import emailjs from "emailjs-com";function Form(){var [name, setName] = useState("");var [email, setEmail] = useState("");var [message, setMessage] = useState("");var [status, setStatus] = useState("");var [warning, setWarning] = useState("");function send(){const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;if(name==="" || email==="" || message===""){setWarning("Please fill all the fields");}else{if(re.test(String(email).toLowerCase())){// setStatus("All set");const templateParams = {message: message,from_name: "Musab Abbasi",user_Email: "abbasimusab2000@gmail.com",to_name: "Musab"};emailjs.send('your service ID','your template ID', templateParams, 'Your user ID').then((response) => {console.log('SUCCESS!', response.status, response.text);if(response.status=="200"){console.log("Success");setEmail("");setName("");setMessage("");setStatus("Message Sent!")}}, (err) => {console.log('FAILED...', err);setStatus("Something went wrong!");});// setStatus("Message sent!");}else{setWarning("Invalid Email address");}}}return(<div className="form"><div className="formDiv"><h1>Send Message</h1><h3>{status}</h3><label htmlFor="">Name</label><br /><input type="text" placeholder="name" value={name} onChange={(e)=>{setName(e.target.value); setWarning(""); setStatus("")}} /><br /><label htmlFor="">Email Address</label><br /><input type="email" placeholder="email" value={email} onChange={(e)=>{setEmail(e.target.value); setWarning(""); setStatus("")}} /><br /><label htmlFor="">Message</label><br /><textarea name="" placeholder="message" value={message} onChange={(e)=>{setMessage(e.target.value); setWarning(""); setStatus("")}} id="" cols="30" rows="20"></textarea><sub>{warning}</sub><br /><button onClick={send}>Send</button></div></div>);}export default Form;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Musab Abbasi

Musab Abbasi

88 Followers

Computer Science Graduate with MERN stack website development expertise.