Mastering Forms in React with EmailJS – A Fun & Easy Guide! 🚀

user icon
by
Hannah Feehan
pen icon
Coding
date icon
January 21, 2025

Why Use EmailJS?

EmailJS is a service that lets us send emails directly from our frontend app without setting up a backend server. It's like having a magic email-sending wand! ✨ With EmailJS, we can send form submissions straight to our inbox hassle-free.

Let’s Build a React Form Step by Step 🏗️

1️⃣ Setting Up Our Project

First, if you haven’t already, create a new React project:

npm create-vite@latest formProject
cd formProject
npm install --save @emailjs/browser

This will set up a fresh React project and install the EmailJS library.

2️⃣ Creating the Form Component

Now, let’s create a ContactForm.js component where our form will live.

3️⃣ Setting Up EmailJS

  1. Go to EmailJS and sign up.
  2. Create a new email service and note down the Service ID.
  3. Create an email template and copy its Template ID.
  4. Get your User ID from the account settings.
  5. Replace your_service_id, your_template_id, and your_user_id in the send function above.

4️⃣ Making It Responsive

We’ll add some CSS to make the form look great on all screen sizes.

ContactForm.css:

5️⃣ Bringing It All Together

Finally, import the form into your App.js and use it:

🎉 Congratulations, You Did It!

You now have a fully functional, responsive, and backend-free form in React using EmailJS! You can modify this setup for bookings, sign-ups, and inquiries. So go ahead, build awesome forms, and make the internet a better place! 🌎✨

Happy Coding! 🚀

blog author image
Hannah Feehan

Designer | Developer | Founder

Passionate about helping others, specialist areas include creative problem solving and education. Mum to three kiddies and two black cats

Connect with a member of Jorvik Web Dev to start a project or find out more info.

Hireus Close Image