Intégration d'un formulaire de contact avec EmailJS dans React

React est une bibliothèque frontale permettant de créer des interfaces utilisateur pour les applications frontales. De plus, React est utile lors de la création de vos applications car il utilise des composants réutilisables.

La question qui a toujours existé pour les développeurs front-end est de savoir comment gérer les requêtes à partir de données de formulaire sans écrire ni avoir connaissance des fonctionnalités back-end. La création d'un serveur principal peut être fastidieuse et l'utilisation d'un service tiers est nécessaire pour cette tâche afin de faciliter l'écriture de la logique.

Qu'est-ce qu'EmailJS ?

EmailJS est un service qui permet d'envoyer des e-mails à l'aide d'applications côté client telles que React, Vue et Angular, sans serveur lors de la configuration et de l'installation.

Dans ce didacticiel, vous apprendrez à connecter une bibliothèque frontale, React, à EmailJS pour recevoir des messages d'utilisateurs sur votre site Web ou vos applications mobiles sans le stress de créer à partir de zéro.

Démo

Prenez une longueur d'avance avec le code de démarrage dans ce référentiel ou créez une nouvelle application React.

Conditions préalables

Pour suivre le tutoriel, vous devez disposer des éléments suivants :

• Node >= 14.0.0 et npm >= 5.6 installé sur votre machine locale
• Comprendre les bases de React
• Un compte EmailJS pour tester le service.

Commencer

La première étape de la construction d'un nouveau projet consiste à disposer des outils de développement qui facilitent la construction. Dans votre terminal, exécutez cette commande :

npx create-react-app react-contact-form-with-emailjs

La commande ci-dessus crée le passe-partout à l'aide de la commande create-react-app qui contient tous les fichiers et packages pour l'application React.

Installer EmailJS

En tant que dépendance, exécutez la commande pour installer le SDK EmailJS dans l'application React.

npm install @emailjs/browser

Exécution du projet

Pour exécuter l'application React, accédez au répertoire du projet et exécutez le serveur de développement fourni avec la fonction de rechargement à chaud, qui, à son tour, met à jour l'application avec toute modification apportée au cours du développement.

Exécutez cette commande :

 cd react-contact-form-with-emailjs npm start

L'application est accessible sur http://localhost:3000 .

Création du formulaire de contact

La collecte et la réception des réponses de vos utilisateurs via le formulaire de contact est une fonctionnalité essentielle qu'un site Web doit avoir, car elle vous rend digne de confiance aux yeux des visiteurs.

Alors, créons le formulaire de contact. Dans votre fichier App.js, copiez et collez le code suivant :

 // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;

Styliser le formulaire de contact

L'interface utilisateur de l'application doit être belle pour les utilisateurs, donc dans le fichier App.css , copiez et collez le code suivant :

 // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }

La page devrait ressembler à ceci avec tout ce qui est bien fait :

Configurer EmailJS

Avec l'achèvement de la page du formulaire de contact sans aucune fonctionnalité pour envoyer des messages, configurons le service qui enverra le contenu du formulaire à votre adresse e-mail.

Ajouter un service de messagerie

Cette section concerne l'intégration entre EmailJS et votre serveur de messagerie. Sur votre tableau de bord EmailJS, choisissez le service Gmail dans l'onglet Services de messagerie , qui devrait ouvrir une nouvelle page appelée service de configuration .

Ensuite, modifiez les paramètres de nom et d'ID de service . L' identifiant du service sera utilisé plus tard lors de l'initialisation du formulaire de contact pour le connecter à EmailJS. Assurez-vous de cliquer sur le bouton Connecter un compte et créer un service pour confirmer vos modifications.

Création d'un modèle d'e-mail

Le modèle d'e-mail est essentiel lorsque vous souhaitez inclure l'objet de l'e-mail, le contenu qu'il contiendra et sa destination dans votre boîte de réception lorsqu'un utilisateur envoie un message depuis le côté client de votre site Web.

Sur le tableau de bord, cliquez sur l' onglet Modèle d'e-mail et Créer un nouveau modèle .

Ensuite, vous devez cliquer sur l'onglet Paramètres et modifier le nom et l' ID du modèle en tout ce que vous désirez. L' ID du modèle sera utilisé plus tard, comme illustré dans l'image ci-dessous :

En revenant à l'onglet Contenu, les valeurs entre accolades sont des variables dynamiques qui doivent avoir la même valeur que celle définie dans l'élément <form> du formulaire de contact, comme le message , user_name et user_email .

Création des variables d'environnement

Les variables d'environnement .env est un fichier qui stocke vos clés publiques et d'autres valeurs que vous ne souhaitez pas partager et qui est privé pour vous seul.

À la racine du répertoire de votre projet, créez un fichier, .env , et collez ce qui suit :

 // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY

Pour la clé publique, vous pouvez la trouver en cliquant sur l'onglet Account et en copiant la valeur comme indiqué dans la section public key :

Initialiser EmailJS

Dans l'application React, importez le package installé, @emailjs/browser package.

Copiez et collez ce qui suit :

 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;

Traitement de la soumission du formulaire

Le crochet useRef gère la soumission du formulaire de contact.

Copiez et mettez à jour le code dans le fichier App.js :

 // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;

Ce qui suit se produit dans le code ci-dessus :

• Le hook useRef est importé et initialisé avec une variable appelée form
• Le crochet, useRef , est utilisé comme référence et assigné à l'élément <form>
• Sur la fonction sendEmail , le formulaire a la méthode preventDefault qui arrête l'actualisation de la page
• Pourtant, dans la fonction sendEmail , la fonction sendForm est invoquée et initialisée avec l'ID de service ID de template ID , la propriété form .current de la ref et la public key
• Une fonction de rappel pour les cas de réussite et d'échec qui se produisent avec la méthode .then()

Voyons maintenant le résultat de ce projet :

Email de confirmation

Conclusion

L'utilisation d'EmailJS pour gérer les demandes de données côté client de votre application est un excellent moyen de recevoir des réponses d'un formulaire de contact. EmailJS fournit d'autres fonctionnalités à explorer et vous offre une expérience robuste sans jamais construire votre serveur ou avoir des connaissances en développement backend. Il fait tout pour vous sous le capot.

Avez-vous déjà utilisé EmailJS ? Que pensez-vous de mon approche ci-dessus ? Faites-nous savoir dans les commentaires ci-dessous!