Mise à jour de 'index.html'

index.html

@@ -6,7 +6,11 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Benjelloun Othmane - Portfolio</title>
-
+  <script type="text/javascript">
+    (function(){
+        emailjs.init("7BilGPRGiKeG3EoPa");
+    })();
+  </script>
   <!--
     - favicon
   -->
@@ -743,26 +747,19 @@
         
 
         <section class="contact-form">
-
-          <h3 class="h3 form-title">Formulaire</h3>
-
-          <form action="#" class="form" data-form>
-
-            <div class="input-wrapper">
-              <input type="text" name="fullname" class="form-input" placeholder="Nom" required data-form-input>
-
-              <input type="email" name="email" class="form-input" placeholder="Adresse mail" required data-form-input>
-            </div>
-
-            <textarea name="message" class="form-input" placeholder="Votre message" required data-form-input></textarea>
-
-            <button class="form-btn" type="submit" disabled data-form-btn>
-              <ion-icon name="paper-plane"></ion-icon>
-              <span>Envoyer</span>
-            </button>
-
-          </form>
-
+            <h3 class="h3 form-title">Formulaire</h3>
+            <form id="contact-form" class="form">
+                <div class="input-wrapper">
+                    <input type="text" name="fullname" class="form-input" placeholder="Nom" required>
+                    <input type="email" name="email" class="form-input" placeholder="Adresse mail" required>
+                </div>
+                <textarea name="message" class="form-input" placeholder="Votre message" required></textarea>
+                <button class="form-btn" type="submit">
+                    <ion-icon name="paper-plane"></ion-icon>
+                    <span>Envoyer</span>
+                </button>
+            </form>
+            <p id="status"></p>
         </section>
 
       </article>
@@ -786,6 +783,31 @@
   -->
   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+  <script type="text/javascript">
+    document.getElementById('contact-form').addEventListener('submit', function(event) {
+        event.preventDefault();
+
+        var fullname = document.querySelector('input[name="fullname"]').value;
+        var email = document.querySelector('input[name="email"]').value;
+        var message = document.querySelector('textarea[name="message"]').value;
+
+        var templateParams = {
+            fullname: fullname,
+            email: email,
+            message: message
+        };
+
+        // Envoyer l'e-mail
+        emailjs.send('service_miwbldn', 'template_vi7w5fd', templateParams)
+            .then(function(response) {
+                console.log('SUCCESS!', response.status, response.text);
+                document.getElementById('status').innerText = 'Message envoyé avec succès!';
+            }, function(error) {
+                console.log('FAILED...', error);
+                document.getElementById('status').innerText = 'Erreur lors de l\'envoi du message.';
+            });
+    });
+</script>
 
 </body>