ajout de la gestion des mails dans la partie contact 💥

12 months ago · a566503c4b
parent e1f0bc17b0
commit a566503c4b
2 changed files with 79 additions and 15 deletions
--- a/index.html
+++ b/index.html
@ -7,6 +7,14 @@
    <link rel="icon" type="image/png" href="logo/slime.png" />
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
+    <!-- Email -->
+    <script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
+    <script type="text/javascript">
+        (function() {
+            emailjs.init('eUXyFFZIItaTd4DVt');
+        })();
+    </script>
 </head>
 <body>
    <nav class="topnav">
@ -235,42 +243,56 @@
            </div>


-            <form class="form">
+            <form class="form" id="contact-form">
                <div class="form__group field">
-                    <input type="input" class="form__field" placeholder="Name" required="">
-                    <label for="name" class="form__label">Nom</label>
+                    <input type="text" name="from_name" class="form__field" placeholder="Nom" required="">
+                    <label for="nom" class="form__label">Nom</label>
                </div>
        
                <div class="form__group field">
-                    <input type="input" class="form__field" placeholder="Name" required="">
-                    <label for="name" class="form__label">Prénom</label>
+                    <input type="text" name="from_first_name" class="form__field" placeholder="Prénom" required="">
+                    <label for="prenom" class="form__label">Prénom</label>
                </div>
        
                <div class="form__group field">
-                    <input type="input" class="form__field" placeholder="Name" required="">
-                    <label for="name" class="form__label">E-mail</label>
+                    <input type="email" name="reply_to" class="form__field" placeholder="E-mail" required="">
+                    <label for="email" class="form__label">E-mail</label>
                </div>
        
                <br/>
        
                <div class="form-group">
                    <label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
-                    <textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
+                    <textarea name="message" id="textarea" rows="10" cols="50" required=""></textarea>
                </div>
        
                <div>
-                    <button class="send-msg">
+                    <button type="submit" class="send-msg">
                        <span class="circle" aria-hidden="true">
                        <span class="icon arrow"></span>
                        </span>
                        <span class="button-text">Envoyer</span>
                    </button>
                </div>
-
            </form>
        </div>
    </section>
    
+    <script type="text/javascript">
+        document.getElementById('contact-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            emailjs.sendForm('service_q2fsaoq', 'template_ahk6uto', this)
+                .then(function() {
+                    console.log('SUCCESS!');
+                    alert('Email envoyé avec succès !');
+                }, function(error) {
+                    console.log('FAILED...', error);
+                    alert('Erreur lors de l\'envoi de l\'email.');
+                });
+        });
+    </script>
+

    <footer>
        <p>&copy; 2024 Pifolio. Tous droits réservés.</p>
@ -319,5 +341,6 @@

    </script>

+
 </body>
 </html>
--- a/send_mail.php
+++ b/send_mail.php
@ -0,0 +1,41 @@
+<?php
+require_once "Mail.php";
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
+    $surname = filter_input(INPUT_POST, 'surname', FILTER_SANITIZE_STRING);
+    $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
+    $message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING);
+
+    if ($name && $surname && $email && $message) {
+        $from = $email;
+        $to = '<cailloux.p03@gmail.com>';
+        $subject = 'Nouveau message du Pifolio !';
+        $body = "Nom: $name $surname\n\nE-mail: $email\n\nMessage:\n$message";
+
+        $headers = array(
+            'From' => $from,
+            'To' => $to,
+            'Subject' => $subject
+        );
+
+        $smtp = Mail::factory('smtp', array(
+            'host' => 'ssl://smtp.gmail.com',
+            'port' => '465',
+            'auth' => true,
+            'username' => 'cailloux.p03@gmail.com',
+            'password' => 'passwordxxx' // Replace with your email password
+        ));
+
+        $mail = $smtp->send($to, $headers, $body);
+
+        if (PEAR::isError($mail)) {
+            echo('<p>' . $mail->getMessage() . '</p>');
+        } else {
+            echo('<p>Message successfully sent!</p>');
+        }
+    } else {
+        echo('<p>Invalid input. Please check your details and try again.</p>');
+    }
+}
+?>