update to contact form, js

contact.html

@@ -41,11 +41,16 @@
                     
                 <h2>Send me a message!</h2>
                 <p>Have questions or special requests? Reach out to me!</p>
+                <p>Don't wanna use the form below? M        y email is just underneath it!</p> 
                 <form id="contactForm">
                     <div class="form-group">
                         <label for="name">Name</label>
                         <input type="text" id="name" name="name" required>
                     </div>
+                    <div class="form-group">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>  
                     <div class="form-group">
                         <label for="subject">Subject</label>
                         <input type="text" id="subject" name="subject" required>
@@ -80,6 +85,10 @@
     </footer>
 
     <script src="script.js"></script>
+    <script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
+</script>
+    <script src="contact.js"></script>
 </body>
 
 </html>

contact.js

@@ -0,0 +1,28 @@
+document.getElementById("contactForm").addEventListener("submit", function(event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    // Initialize EmailJS
+    emailjs.init("BfYQtqbAmpqUEmFDF");  
+    console.log("EmailJS initialized.");
+
+    // Prepare the template parameters
+    var templateParams = {
+        to_name: "Tristan",   
+        from_name: document.getElementById("name").value,
+        reply_to: document.getElementById("email").value,
+        message: document.getElementById("message").value,
+    };
+
+    // Send the email using EmailJS
+    emailjs.send("service_ksnq0rd", "template_d1jme4h", templateParams)
+        .then(function(response) {
+            console.log("Email sent successfully:", response.status, response.text);
+            alert("Message sent successfully!");
+
+            // Clear the form fields
+            document.getElementById("contactForm").reset();
+        }, function(error) {
+            console.error("Failed to send message:", error);
+            alert("Failed to send message. Please try again later.");
+        });
+});

script.js

@@ -51,28 +51,4 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 });
 
-// Contact Form Functionality with EmailJS
-document.getElementById("contactForm").addEventListener("submit", function(event) {
-    event.preventDefault(); // Prevent the default form submission
 
-    // Initialize EmailJS
-    emailjs.init("BfYQtqbAmpqUEmFDF");
-    console.log("EmailJS initialized.");
-
-    // Prepare the template parameters
-    var templateParams = {
-        name: document.getElementById("name").value,
-        subject: document.getElementById("subject").value,
-        message: document.getElementById("message").value,
-    };
-
-    // Send the email using EmailJS
-    emailjs.send("service_ksnq0rd", "template_d1jme4h", templateParams)
-        .then(function(response) {
-            console.log("Email sent successfully:", response.status, response.text);
-            alert("Message sent successfully!");
-        }, function(error) {
-            console.error("Failed to send message:", error);
-            alert("Failed to send message. Please try again later.");
-        });
-});