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,3 +1,4 @@
+// Carousel Functionality
 let currentIndex = 0;
 let slides = document.getElementsByClassName("carousel-item");
 let totalSlides = slides.length;
@@ -49,3 +50,29 @@ 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.");
+        });
+});

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%;
     }
 }
+