Envoyer un email avec EmailJS

1. Introduction

EmailJS permet d’envoyer des emails directement depuis le front-end, sans backend. C’est rapide, simple et gratuit jusqu’à une certaine limite mensuelle pour la version gratuite.

2. Création du compte EmailJS

Crée un compte sur emailjs.com et connecte-toi.
Dans ton tableau de bord :

Crée un nouveau service (Gmail par exemple).

Crée un nouveau template avec les variables : `user_name`, `user_email`, `message`.

Récupère ton `Service ID`, `Template ID` et `Public Key`.

Le Public Key se situe dans l'onglet Account :

3. Installation d'EmailJS

Dans ton terminal, installe la bibliothèque :

npm install emailjs-com

4. Créer un formulaire HTML

Voici un exemple simple de formulaire :

<form id="contact-form">
  <input type="text" name="user_name" placeholder="Nom" required />
  <input type="email" name="user_email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Envoyer</button>
</form>

5. Ajouter le script JavaScript

Puis ajoute ce script à ton projet dans un fichier JS :

import emailjs from 'emailjs-com';

const sendEmail = (e) => {
  e.preventDefault();
  emailjs.sendForm(
    'YOUR_SERVICE_ID',
    'YOUR_TEMPLATE_ID',
    e.target,
    'YOUR_PUBLIC_KEY'
  ).then((result) => {
    console.log('Email envoyé !', result.text);
  }).catch((error) => {
    console.error('Erreur :', error.text);
  });
};

document.getElementById('contact-form').addEventListener('submit', sendEmail);

6. Exemple dans un projet React/Next.js

Étape 1. Créer un fichier `.env.local`

Stocke tes identifiants EmailJS dans un fichier .env.local (non versionné sur GitHub).

NEXT_PUBLIC_EMAILJS_SERVICE_ID=xxxxxx
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=xxxxxx
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=xxxxxx

Étape 2. Créer un composant ContactForm

Dans ton projet, crée un composant React ContactForm.jsx (ou ContactForm.tsx si tu utilises TypeScript).

"use client";
import { useRef } from "react";
import emailjs from "emailjs-com";

export default function ContactForm() {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm(
      process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID,
      process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID,
      form.current,
      process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY
    )
    .then((result) => {
      console.log("Email envoyé !", result.text);
      alert("Message envoyé avec succès");
    })
    .catch((error) => {
      console.error("Erreur :", error.text);
      alert("Une erreur est survenue");
    });
  };

  return (
    <form ref={form} onSubmit={sendEmail} className="flex flex-col gap-4 p-4 border rounded-lg">
      <input type="text" name="user_name" placeholder="Nom" required className="p-2 border rounded"/>
      <input type="email" name="user_email" placeholder="Email" required className="p-2 border rounded"/>
      <textarea name="message" placeholder="Message" required className="p-2 border rounded"/>
      <button type="submit" className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
        Envoyer
      </button>
    </form>
  );
}

Étape 3. Importer le formulaire

Tu peux ensuite l'utiliser dans une page Next.js (par exemple app/contact/page.jsx).

import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-black">
      <div className="max-w-lg w-full bg-gray-900 p-8 rounded-lg">
        <h1 className="text-2xl font-bold text-white mb-4">Contact</h1>
        <ContactForm />
      </div>
    </main>
  );
}

Avec cette configuration, ton formulaire envoie directement les emails via EmailJS, sans backend supplémentaire.

Étape 4. Ajouter les variables en production

Les fichiers .env.local ne sont pas envoyés lors du déploiement. Il faut donc définir tes variables dans l'environnement de ton hébergeur.

Sur Vercel : va dans ton projet → Settings → Environment Variables → ajoute NEXT_PUBLIC_EMAILJS_SERVICE_ID, NEXT_PUBLIC_EMAILJS_TEMPLATE_ID, NEXT_PUBLIC_EMAILJS_PUBLIC_KEY.
Sur Netlify : va dans Site settings → Build & Deploy → Environment → ajoute les mêmes variables.
Sur un autre hébergeur, recherche la section Environment Variables ou Config Vars et ajoute-les.

Important : comme ce sont des variables NEXT_PUBLIC_, elles seront accessibles dans ton code côté client (React).
C’est normal avec EmailJS, car la clé publique (Public Key) est conçue pour être exposée dans le front-end.

Conclusion

Tu peux maintenant envoyer des e-mails directement depuis ton site, sans backend ni configuration complexe. Pour aller plus loin, personnalise tes templates ou ajoute des pièces jointes.

← Retour au blog ← Retourner à la série