+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Send Email from React Using EmailJS (No Backend Required) (/thread-103620.html)
[Tut] Send Email from React Using EmailJS (No Backend Required) - xSicKxBot - 12-07-2025
[Tut] Send Email from React Using EmailJS (No Backend Required)
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2025/12/send-email-from-react-using-emailjs-no-backend-required.jpg" width="550" height="288" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 13th, 2025.</div>
<p>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>
<p>This tutorial shows the step-by-step procedure to learn how to enable <a href="https://phppot.com/laravel/how-to-send-email-via-laravel-sendmail-mailer/">email sending</a> in a React application using EmialJS.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24642" src="https://phppot.com/wp-content/uploads/2025/11/send-email-from-react-using-emailjs-550x288.jpeg" alt="Send Email From React Using EmailJS" width="550" height="288" srcset="https://phppot.com/wp-content/uploads/2025/11/send-email-from-react-using-emailjs-550x288.jpeg 550w, https://phppot.com/wp-content/uploads/2025/11/send-email-from-react-using-emailjs-300x157.jpeg 300w, https://phppot.com/wp-content/uploads/2025/11/send-email-from-react-using-emailjs-768x402.jpeg 768w, https://phppot.com/wp-content/uploads/2025/11/send-email-from-react-using-emailjs.jpeg 1200w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h2>Steps to allow EmailJS to send mail</h2>
<h3>1. Signup with EmailJS service</h3>
<p>First <a href="https://dashboard.emailjs.com/admin" target="_blank" rel="noopener">signup and login with EmailJS dashboard</a>. It’s a free and enables mail sending via various services supported.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24628" src="https://phppot.com/wp-content/uploads/2025/11/select-email-sending-service-550x522.png" alt="Select Email Sending Service" width="550" height="522" srcset="https://phppot.com/wp-content/uploads/2025/11/select-email-sending-service-550x522.png 550w, https://phppot.com/wp-content/uploads/2025/11/select-email-sending-service-300x285.png 300w, https://phppot.com/wp-content/uploads/2025/11/select-email-sending-service.png 600w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h3>2. Choose service provider via <em>Add New Service -> Select Service</em></h3>
<p>It supports various services like Gmail, Yahoo and etc. It also have settings to <a href="https://phppot.com/laravel/send-email-in-laravel/">configure custom SMTP server</a> with this online solution.<br /><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24632" src="https://phppot.com/wp-content/uploads/2025/11/permit-emailjs-to-access-mail-account-550x301.png" alt="Permit EmailJS To Access Mail Account" width="550" height="301" srcset="https://phppot.com/wp-content/uploads/2025/11/permit-emailjs-to-access-mail-account-550x301.png 550w, https://phppot.com/wp-content/uploads/2025/11/permit-emailjs-to-access-mail-account-300x164.png 300w, https://phppot.com/wp-content/uploads/2025/11/permit-emailjs-to-access-mail-account-768x420.png 768w, https://phppot.com/wp-content/uploads/2025/11/permit-emailjs-to-access-mail-account.png 1200w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h3>3. Design mail template by <em>Email Templates -> Create New Template -> Select Template</em></h3>
<p>There are various built-in templates in the EmailJS dashboard. I selected the <a href="https://phppot.com/php/html-contact-form-template-to-email-with-custom-fields/">“Contact Us” template</a> for this example.</p>
<p>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>
<p>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>
<p>Copy the Template ID once created an email template.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24630" src="https://phppot.com/wp-content/uploads/2025/11/design-emailjs-template-550x296.png" alt="Design EmailJS Template" width="550" height="296" srcset="https://phppot.com/wp-content/uploads/2025/11/design-emailjs-template-550x296.png 550w, https://phppot.com/wp-content/uploads/2025/11/design-emailjs-template-300x162.png 300w, https://phppot.com/wp-content/uploads/2025/11/design-emailjs-template-768x413.png 768w, https://phppot.com/wp-content/uploads/2025/11/design-emailjs-template.png 1200w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h3>4. Get EmailJS API Public Key</h3>
<p>Added <strong>Service ID</strong>, <strong>Template ID </strong>the EmailJS <strong>Public Key</strong> is also need to initiate the library class from the frontend React App.</p>
<p>Navigate via Account using the left menu to open the API keys section. Copy <strong>Public Key</strong> from the EmailJS dashboard.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24631" src="https://phppot.com/wp-content/uploads/2025/11/get-emailjs-account-public-key-550x296.png" alt="Get EmailJS Account Public Key" width="550" height="296" srcset="https://phppot.com/wp-content/uploads/2025/11/get-emailjs-account-public-key-550x296.png 550w, https://phppot.com/wp-content/uploads/2025/11/get-emailjs-account-public-key-300x162.png 300w, https://phppot.com/wp-content/uploads/2025/11/get-emailjs-account-public-key-768x413.png 768w, https://phppot.com/wp-content/uploads/2025/11/get-emailjs-account-public-key.png 1200w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h2>Initiate EmailJS library to React App</h2>
<p>Create a React app and install the EmailJS library to it using this command.</p>
<pre class="prettyprint"><code class="language-make-file">npm install emailjs-com
</code></pre>
<p>This example code contains this library installed. So, just run <code>npm install</code> to bring the dependancies into your <code>node_modules</code>.</p>
<p>Then, import the emailjs-com to the React JSX and initiate the EmailJS service as shown below. This script shows how the <code>emailjs</code> instance is used in the form handle submit.</p>
<pre class="prettyprint"><code class="language-make-file">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", }); }); };
</code></pre>
<h2>Example React form to send email</h2>
<p>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>
<p>It renders Name, Email and Message fields. Each fields is validated with a <code>handleChange</code> hook.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24514" src="https://phppot.com/wp-content/uploads/2025/11/react-send-mail-form-550x383.jpg" alt="react send mail form" width="550" height="383" srcset="https://phppot.com/wp-content/uploads/2025/11/react-send-mail-form-550x383.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/react-send-mail-form-300x209.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/react-send-mail-form-768x534.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/react-send-mail-form.jpg 1146w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<p class="code-heading"><code>src/components/EmailFormFields.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">const EmailFormFields = ({ formData, handleChange }) => {
return ( <> <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> </>
);
};
export default EmailFormFields;
</code></pre>
<h2>React JSX to load EmailJS and EmailFormFields Component</h2>
<p>This JSX defines the <code>handleChange</code> and <code>handleSubmit</code> <a href="https://phppot.com/react/react-hook-user-registration-form/">hooks for validation</a> and mail sending respectively.</p>
<p>The form container includes the <code><EmailFormFields /></code>, Submit button and a <code><ToastContainer /></code>.</p>
<p>After sending email via emailjs, the handleSubmit action resets the form and make it ready for the next submit.</p>
<p>When submitting the form, the <code>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>
<p class="code-heading"><code>src/components/EmailForm.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">import { useState } from "react";
import emailjs from "emailjs-com";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "../../public/assets/css/phppot-style.css";
import 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> );
};
export default EmailForm;
</code></pre>
<p><strong>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 <code>Hi {{name}}</code>, then the form data will have the key-value as <code>name: submitted-name</code> to replace the variable.</p>
<p>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>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24640" src="https://phppot.com/wp-content/uploads/2025/11/react-received-web-mail-1-550x309.jpg" alt="React Received Web Mail" width="550" height="309" srcset="https://phppot.com/wp-content/uploads/2025/11/react-received-web-mail-1-550x309.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/react-received-web-mail-1-300x168.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/react-received-web-mail-1-768x431.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/react-received-web-mail-1.jpg 1499w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h2>Conclusion</h2>
<p>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>
<p><a class="download" href="https://phppot.com/downloads/react/send-email-from-react-using-emailjs.zip">Download</a></p>
<div class="written-by" readability="9.8427672955975">
<div class="author-photo"> <img loading="lazy" decoding="async" src="https://phppot.com/wp-content/themes/solandra/images/Vincy.jpg" alt="Vincy" width="100" height="100" title="Vincy"> </div>
<div class="written-by-desc" readability="14.764150943396"> Written by <a href="https://phppot.com/about/">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>
</p></div>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Related Tutorials</h2>
</p></div>
<p> <a href="https://phppot.com/react/send-email-from-react-using-emailjs/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2025/11/06/send-email-from-react-using-emailjs-no-backend-required/