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