a non working form

contact.html

@@ -37,7 +37,26 @@
                     for your next project, have a custom order in mind, or just want to share your crafting experiences,
                     we're here for it all. Feel free to drop us a message using the form below or connect with us
                     through our social media channels. Let's weave a thread of creativity and conversation together at
-                    WillowMeCreations – where every message is a stitch in our community's vibrant tapestry.</p>
+                    WillowMeCreations       where every message is a stitch in our community's vibrant tapestry.</p>
+                    
+                <h2>Send me a message!</h2>
+                <p>Have questions or special requests? Reach out to me!</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="subject">Subject</label>
+                        <input type="text" id="subject" name="subject" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" required></textarea>
+                    </div>
+                    <button type="submit" class="btn">Send Message</button>
+                </form>
+
                 <h2>Contact Information</h2>
                 <p>Email: <a href="mailto:willowmecreations@yahoo.com">willowmecreations@yahoo.com</a><br>
                 TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>

script.js

@@ -1,51 +1,78 @@
+// Carousel Functionality
 let currentIndex = 0;
 let slides = document.getElementsByClassName("carousel-item");
 let totalSlides = slides.length;
 
 function showSlides() {
-	for (let i = 0; i < totalSlides; i++) {
+    for (let i = 0; i < totalSlides; i++) {
-		slides[i].classList.remove("active");
+        slides[i].classList.remove("active");
-	}
+    }
-	currentIndex++;
+    currentIndex++;
-	if (currentIndex >= totalSlides) {
+    if (currentIndex >= totalSlides) {
-		currentIndex = 0;
+        currentIndex = 0;
-	}
+    }
-	slides[currentIndex].classList.add("active");
+    slides[currentIndex].classList.add("active");
-	setTimeout(showSlides, 3000); // Change image every 3 seconds
+    setTimeout(showSlides, 3000); // Change image every 3 seconds
 }
 
 function moveSlides(n) {
-	currentIndex += n;
+    currentIndex += n;
-	if (currentIndex >= totalSlides) {
+    if (currentIndex >= totalSlides) {
-		currentIndex = 0;
+        currentIndex = 0;
-	} else if (currentIndex < 0) {
+    } else if (currentIndex < 0) {
-		currentIndex = totalSlides - 1;
+        currentIndex = totalSlides - 1;
-	}
+    }
-	for (let i = 0; i < totalSlides; i++) {
+    for (let i = 0; i < totalSlides; i++) {
-		slides[i].classList.remove("active");
+        slides[i].classList.remove("active");
-	}
+    }
-	slides[currentIndex].classList.add("active");
+    slides[currentIndex].classList.add("active");
 }
 
 // Initial call to start the slideshow
 showSlides();
 
 function toggleMenu() {
-	var x = document.getElementById("myTopnav");
+    var x = document.getElementById("myTopnav");
-	if (x.className === "topnav") {
+    if (x.className === "topnav") {
-		x.className += " responsive";
+        x.className += " responsive";
-	} else {
+    } else {
-		x.className = "topnav";
+        x.className = "topnav";
-	}
+    }
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-	var pathname = window.location.pathname;
+    var pathname = window.location.pathname;
-	var navLinks = document.querySelectorAll(".topnav a");
+    var navLinks = document.querySelectorAll(".topnav a");
 
-	navLinks.forEach(function (link) {
+    navLinks.forEach(function (link) {
-		if (link.getAttribute("href") === pathname.split("/").pop()) {
+        if (link.getAttribute("href") === pathname.split("/").pop()) {
-			link.classList.add("active");
+            link.classList.add("active");
-		}
+        }
-	});
+    });
+});
+
+// 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.");
+        });
 });

style.css

@@ -405,6 +405,42 @@ body {
     color: #333;
 }
 
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.form-group textarea {
+    resize: vertical;
+    height: 150px;
+}
+
+button.btn {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button.btn:hover {
+    background-color: #555;
+}
+
 /* Media Queries for Responsiveness */
 
 @media (max-width: 768px) {
@@ -521,3 +557,4 @@ body {
         width: 100%;
     }
 }
+