{"id":135320,"date":"2025-11-06T10:19:54","date_gmt":"2025-11-06T10:19:54","guid":{"rendered":"https:\/\/phppot.com\/?p=24507"},"modified":"2025-11-06T10:19:54","modified_gmt":"2025-11-06T10:19:54","slug":"send-email-from-react-using-emailjs-no-backend-required","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2025\/11\/06\/send-email-from-react-using-emailjs-no-backend-required\/","title":{"rendered":"Send Email from React Using EmailJS (No Backend Required)"},"content":{"rendered":"
by Vincy<\/a>. Last modified on November 13th, 2025.<\/div>\n

EmailJS is a cloud service that supports to enable the frontend to send email without any backend. All we need is to create an EmailJS account and configure it to the frontend application.<\/p>\n

This tutorial shows the step-by-step procedure to learn how to enable email sending<\/a> in a React application using EmialJS.<\/p>\n

\"Send<\/p>\n

Steps to allow EmailJS to send mail<\/h2>\n

1. Signup with EmailJS service<\/h3>\n

First signup and login with EmailJS dashboard<\/a>. It\u2019s a free and enables mail sending via various services supported.<\/p>\n

\"Select<\/p>\n

2. Choose service provider via Add New Service -> Select Service<\/em><\/h3>\n

It supports various services like Gmail, Yahoo and etc. It also have settings to configure custom SMTP server<\/a>  with this online solution.
\"Permit<\/p>\n

3. Design mail template by Email Templates -> Create New Template -> Select Template<\/em><\/h3>\n

There are various built-in templates in the EmailJS dashboard. I selected the \u201cContact Us\u201d template<\/a> for this example.<\/p>\n

Template edit interface has the option to change the design and the content. It allows to add dynamic variables as part of the mail content.<\/p>\n

When calling the EmailJS service, the request will have values to replace this variables. This feature will help to send a personalized email content.<\/p>\n

Copy the Template ID once created an email template.<\/p>\n

\"Design<\/p>\n

4. Get EmailJS API Public Key<\/h3>\n

Added Service ID<\/strong>, Template ID <\/strong>the EmailJS Public Key<\/strong>  is also need to initiate the library class from the frontend React App.<\/p>\n

Navigate via Account using the left menu to open the API keys section. Copy Public Key<\/strong> from the EmailJS dashboard.<\/p>\n

\"Get<\/p>\n

Initiate EmailJS library to React App<\/h2>\n

Create a React app and install the EmailJS library to it using this command.<\/p>\n

npm install emailjs-com\n<\/code><\/pre>\n
This example code contains this library installed. So, just run npm install<\/code> to bring the dependancies into your node_modules<\/code>.<\/p>\n
Then, import the emailjs-com to the React JSX and initiate the EmailJS service as shown below. This script shows how the emailjs<\/code> instance is used in the form handle submit.<\/p>\n
import emailjs from \"emailjs-com\"; const handleSubmit = (e) => { e.preventDefault(); const SERVICE_ID = \"Your Serivce ID\"; const TEMPLATE_ID = \"Your Template ID\"; const PUBLIC_KEY = \"EmailJS API Public key here\"; emailjs .send(SERVICE_ID, TEMPLATE_ID, formData, PUBLIC_KEY) .then(() => { toast.success(\"Email sent successfully!\", { position: \"top-center\" }); setFormData({ name: \"\", email: \"\", message: \"\" }); }) .catch(() => { toast.error(\"Failed to send email. Please try again.\", { position: \"top-center\", }); }); };\n<\/code><\/pre>\n
Example React form to send email<\/h2>\n
This example provides component for the email sending form fields. The fields UI code is moved to a separate file and made as a component. It is imported into the parent container in the EmailForm component.<\/p>\n
It renders Name, Email and Message fields. Each fields is validated with a handleChange<\/code> hook.<\/p>\n
\"react<\/p>\n
src\/components\/EmailFormFields.jsx<\/code><\/p>\n
const EmailFormFields = ({ formData, handleChange }) => {\nreturn ( <> <div className=\"form-group\"> <label className=\"form-label\">Name<\/label> <input type=\"text\" name=\"name\" value={formData.name} onChange={handleChange} className=\"form-input\" required \/> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Email<\/label> <input type=\"email\" name=\"email\" value={formData.email} onChange={handleChange} className=\"form-input\" required \/> <\/div> <div className=\"form-group\"> <label className=\"form-label\">Message<\/label> <textarea name=\"message\" value={formData.message} onChange={handleChange} className=\"form-input\" rows=\"6\" required ><\/textarea> <\/div> <\/>\n);\n};\nexport default EmailFormFields;\n<\/code><\/pre>\n
React JSX to load EmailJS and EmailFormFields Component<\/h2>\n
This JSX defines the handleChange<\/code> and handleSubmit<\/code> hooks for validation<\/a> and mail sending respectively.<\/p>\n
The form container includes the <EmailFormFields \/><\/code>, Submit button and a <ToastContainer \/><\/code>.<\/p>\n
After sending email via emailjs, the handleSubmit action resets the form and make it ready for the next submit.<\/p>\n
When submitting the form, the handleSubmit<\/code> function sends the formData with the API keys and IDs. Configure your EmailJS keys and IDs to this React script to make this example to send email.<\/p>\n
src\/components\/EmailForm.jsx<\/code><\/p>\n
import { useState } from \"react\";\nimport emailjs from \"emailjs-com\";\nimport { ToastContainer, toast } from \"react-toastify\";\nimport \"react-toastify\/dist\/ReactToastify.css\";\nimport \"..\/..\/public\/assets\/css\/phppot-style.css\";\nimport EmailFormFields from \".\/EmailFormFields\"; const EmailForm = () => { const [formData, setFormData] = useState({ name: \"\", email: \"\", message: \"\", }); const handleChange = (e) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; const handleSubmit = (e) => { e.preventDefault(); const SERVICE_ID = \"Your Serivce ID\"; const TEMPLATE_ID = \"Your Template ID\"; const PUBLIC_KEY = \"EmailJS API Public key here\"; emailjs .send(SERVICE_ID, TEMPLATE_ID, formData, PUBLIC_KEY) .then(() => { toast.success(\"Email sent successfully!\", { position: \"top-center\" }); setFormData({ name: \"\", email: \"\", message: \"\" }); }) .catch(() => { toast.error(\"Failed to send email. Please try again.\", { position: \"top-center\", }); }); }; return ( <div className=\"form-wrapper\"> <h2 className=\"form-title\">Contact Us<\/h2> <form onSubmit={handleSubmit} className=\"payment-form\"> <EmailFormFields formData={formData} handleChange={handleChange} \/> <button type=\"submit\" className=\"submit-btn\"> Send <\/button> <\/form> <ToastContainer \/> <\/div> );\n};\nexport default EmailForm;\n<\/code><\/pre>\n
Note: <\/strong>Form data is in an associate array format, where the array keys matches the email template variables. For example, if the email template body in the EmailJS dashboard contains Hi {{name}}<\/code>, then the form data will have the key-value as name: submitted-name<\/code> to replace the variable.<\/p>\n
The receive email signature and the mail body design will be as configured in the EmailJS dashboard. The following diagram shows the received email output.<\/p>\n
\"React<\/p>\n
Conclusion<\/h2>\n
Thus, we have created a frontend in React for sending email without any backend set up. I hope, you find EmailJS very simple to integrate into an application. And its registration process is very simple. And, the features to customize the email body is very useful to have a thematic email template for different applications.<\/p>\n
Download<\/a><\/p>\n
\n
 \"Vincy\" <\/div>\n
 Written by Vincy<\/a>, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials. <\/div>\n<\/p><\/div>\n
  <\/p>\n
\n
Related Tutorials<\/h2>\n<\/p><\/div>\n
 \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
by Vincy. Last modified on November 13th, 2025. EmailJS is a cloud service that supports to enable the frontend to send email without any backend. All we need is to create an EmailJS account and configure it to the frontend application. This tutorial shows the step-by-step procedure to learn how to enable email sending in […]<\/p>\n","protected":false},"author":2,"featured_media":135321,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-135320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=135320"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/135320\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/135321"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=135320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=135320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=135320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}