Send Email Through Forms Without Server Code: React JS & EmailJS
Hello Coders! 😍
In today’s digital age, sending emails is a fundamental part of many web applications. Whether it’s sending feedback, inquiries, or notifications, having a functional email system is crucial. Traditionally, setting up email functionality required server-side code to handle the sending process. However, with modern tools like EmailJS, you can seamlessly integrate email functionality into your React JS applications without the need for server-side scripting. In this tutorial, we’ll walk through the process of setting up an EmailJS account and integrating it into a React JS application to enable sending emails through forms.
Setting Up EmailJS Account
First of all, you need to create an account on EmailJs. EmailJs is a third-party service that allows sending emails using client-side code. Sign up for an account on EmailJs and obtain your API key. You can get up to 200 emails monthly for a free account.
Once you’ve signed up and logged in to your EmailJS account, you will get into the dashboard. Then go to Email Services and click on “Add New Service”. Go ahead with Gmail and click on “Connect Account”. Then select your Gmail account that you need to connect to. After that go ahead with Create Service on Config Service window. Once you do that, Gmail will appear under Email Services.
Now you need to create an email template. Email templates define the structure and content of the emails you’ll be sending. Navigate to the Email Templates section and click on “Create New Template.” Follow the prompts to create a new template, specifying details such as the subject, body, and placeholders for dynamic content and save it. A sample email template is shown below.
After creating the email template, EmailJS will provide you with the integration details that you’ll need to connect your React JS application to EmailJS. These details typically include a Service ID, Template ID, and Public Key. You’ll need them later in your React JS code.
Integrating EmailJS with React JS
If you haven’t already set up a React JS application, you can do so using tools like Create React App. Once your React project is set up, navigate to your project directory in the terminal and install the EmailJS library using npm.
npm install @emailjs/browserIn your React JS application, create a component for your email form. This component will include the form fields such as name, email, message, etc., and a submit button to trigger the email-sending process. Within your email form component, implement the logic to send emails using EmailJS. Sample code is given below.
In the above code, replace "YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", and "YOUR_PUBLIC_KEY" with your Service ID, Template ID, and Public Key that you obtained earlier.
Once you’ve implemented the email-sending logic, test your application to ensure that emails are being sent successfully. Fill out the form with valid data and submit it to trigger the email-sending process. Check both the sender and recipient email addresses to verify that the email is delivered successfully.
In this article, we explored how to send emails through forms in a React JS application without relying on server-side code. By integrating the EmailJs API, developers can achieve client-side email functionality seamlessly. Remember to follow best practices and security considerations to ensure a robust and secure implementation.
Happy Coding!
