Formulaire de contact utilisant EmailJS

Ce formulaire de contact moderne, construit avec React, Tailwind CSS et EmailJS, offre une fonctionnalité de messagerie en temps réel. Le code et les instructions fournis vous guident dans la création d'un formulaire de contact professionnel pour votre site Web.

Démo en direct : https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

Code source : https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1. Configuration et installation du projet

Étape 1 : Cloner le référentiel

Clonez le projet depuis GitHub en utilisant Git :

<code class="language-bash">git clone https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216
cd contact-form</code>

Étape 2 : Installer les dépendances

Installez les packages requis via npm :

<code class="language-bash">npm install</code>

2. Configuration d'EmailJS

Étape 1 : Création de compte

1. Inscrivez-vous pour un compte EmailJS gratuit.
2. Accédez à votre tableau de bord EmailJS après vous être connecté.

Étape 2 : Ajouter un service de messagerie

1. Accédez à Services de messagerie et sélectionnez Ajouter un service de messagerie.
2. Choisissez votre fournisseur de messagerie (Gmail, Outlook, etc.) et suivez les instructions de connexion.

Étape 3 : Création d'un modèle d'e-mail

1. Allez dans Modèles d'e-mails et cliquez sur Créer un nouveau modèle.
2. Personnalisez votre modèle d'e-mail en utilisant des espaces réservés tels que {{name}}, {{email}} et {{message}}.
3. Enregistrez le modèle et notez l'ID du modèle.

Étape 4 : obtention des clés API

1. Allez dans Intégration > Clés API.
2. Copiez l'ID de service, l'ID de modèle et l'ID d'utilisateur. Ceux-ci sont cruciaux pour la prochaine étape.

3. Définition des variables d'environnement

Créez un fichier .env dans le répertoire racine de votre projet et ajoutez les lignes suivantes, en remplaçant les espaces réservés par vos identifiants EmailJS :

<code>VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_USER_ID=your_user_id</code>

N'oubliez pas de remplacer your_service_id, your_template_id et your_user_id par les valeurs réelles obtenues à partir d'EmailJS. Ceci termine la configuration. Reportez-vous au référentiel GitHub pour plus de détails sur le code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!