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);

Conclusion

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