How to Receive Emails Using EmailJS: A Simple Alternative to Resend for Contact Forms.

When building contact forms for websites, developers often reach for comprehensive email services like Resend, SendGrid, or Mailgun. While these platforms offer robust features, they can be overkill if you need to receive messages from your contact form. Here comes EmailJS – a lightweight, client-side solution that lets you receive emails directly without server-side complexity.

Why Choose EmailJS Over Resend?

The Problem with Over-Engineering

Resend is an excellent service for transactional emails, newsletters, and complex email workflows. However, for a simple contact form that only needs to forward messages to your inbox, it introduces unnecessary complexity:

• Server-side requirements: Resend needs backend API integration
• Cost considerations: Paid tiers for higher volumes
• Setup overhead: Authentication, error handling, and server configuration
• Overkill features: Advanced analytics and delivery tracking, you might not need

One of EmailJS's most attractive features is its generous free tier, offering 200 emails per month.

EmailJS: The Lightweight Champion

EmailJS shines in scenarios where simplicity is key:

• Client-side only: No backend required
• Quick setup: Get running in minutes, not hours
• Generous free tier: 200 emails per month at no cost
• Multiple providers: Works with Gmail, Outlook, Yahoo, and more
• Direct delivery: Messages land straight in your inbox

Setting Up EmailJS: Step-by-Step Guide

Step 1: Create Your EmailJS Account

1. Visit emailjs.com and sign up for a free account
2. Verify your email address
3. Access your EmailJS dashboard

Step 2: Configure Your Email Service
EmailJS needs to connect to your email provider to send messages:

1. Click "Email Services" in your dashboard
2. Choose your email provider (Gmail, Outlook, etc.)
3. For Gmail users:
   • Click "Connect Account"
   • Authorize EmailJS to access your Gmail
   • Your service will be automatically configured
4. For other providers, you'll need SMTP settings:
   • Server address and port
   • Username and password (use app passwords for security)

Step 3: Create an Email Template
Templates define how your received emails will look:

Navigate to "Email Templates"
Click "Create New Template"
Design your template using variables:

Key template variables to include:

• {{user_name}} - Sender's name
• {{user_email}} - Sender's email
• {{user_message}} - The actual message
• {{to_email}} - Your email address (recipient)

Step 4: Get Your Integration Keys
EmailJS provides three essential keys:

Public Key: Found in "Account" → "General"
Service ID: From your configured email service
Template ID: From your created template

Store these securely in your environment variables.

Implementation: React Contact Form with EmailJS

Here's how to implement EmailJS in a React contact form:

Install EmailJS
Create a .env.local file:

//env

NEXT_PUBLIC_SERVICE_ID=your_service_id
NEXT_PUBLIC_TEMPLATE_ID=your_template_id  
NEXT_PUBLIC_PUBLIC_ID=your_public_key

The Contact Form Component

//jsx

"use client";

import React, { FormEvent, useRef, useState } from "react";
import emailjs from "@emailjs/browser";

const ContactForm = () => {
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const form = useRef<HTMLFormElement>(null);

  const sendEmail = async (e: FormEvent) => {
    e.preventDefault();
    setError(false);
    setSuccess(false);
    setLoading(true);

    if (!form.current) {
      setError(true);
      setLoading(false);
      return;
    }

    try {
      await emailjs.sendForm(
        process.env.NEXT_PUBLIC_SERVICE_ID as string,
        process.env.NEXT_PUBLIC_TEMPLATE_ID as string,
        form.current,
        {
          publicKey: process.env.NEXT_PUBLIC_PUBLIC_ID as string,
        }
      );

      setSuccess(true);
      form.current.reset();
    } catch (err) {
      setError(true);
      console.error('EmailJS error:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto p-6">
      <h2 className="text-2xl font-bold mb-6">Contact Us</h2>

      <form ref={form} onSubmit={sendEmail} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1">
            Full Name *
          </label>
          <input
            name="user_name"
            type="text"
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="John Doe"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">
            Email Address *
          </label>
          <input
            name="user_email"
            type="email"
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="[e-mail]"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">
            Message *
          </label>
          <textarea
            name="user_message"
            rows={4}
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Your message here..."
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition duration-200"
        >
          {loading ? 'Sending...' : 'Send Message'}
        </button>

        {success && (
          <div className="text-green-600 font-semibold">
            Message sent successfully! We'll get back to you soon.
          </div>
        )}

        {error && (
          <div className="text-red-600 font-semibold">
            Failed to send message. Please try again.
          </div>
        )}
      </form>
    </div>
  );
};

export default ContactForm;

Just like that, we now have a fully working mail receiver set up in minutes using EmailJS. You can also easily create a new template to auto-reply to incoming messages—add it to the auto-reply section, and you're good to go.

When to Choose EmailJS vs. Resend

Choose EmailJS When:

• Building simple contact forms
• Need quick setup without backend
• Have low to moderate email volume
• Want direct inbox delivery
• Working with static sites or JAMstack

Choose Resend When:

• Need transactional email workflows
• Require advanced analytics and tracking
• Building email marketing features
• Need guaranteed delivery rates
• Have high volume requirements (1000+ emails/month)

Conclusion

EmailJS provides an excellent middle ground for developers who need reliable email functionality without the complexity of full-featured email services. Its client-side approach makes it perfect for contact forms, feedback systems, and simple notifications.

The generous 200 emails per month free tier covers most small to medium websites, and the straightforward setup means you can have a working contact form in under 30 minutes. For many use cases, EmailJS delivers exactly what you need – nothing more, nothing less.

Whether you're building a portfolio site, small business website, or prototype application, EmailJS offers a pragmatic solution that balances simplicity with reliability. Give it a try for your next project, and you might find it's the perfect fit for your email needs.