a non working form

This commit is contained in:
Tristan Smith 2024-08-09 01:21:29 -04:00
parent 6ed0bd68fb
commit f559d49b42
No known key found for this signature in database
GPG key ID: CDB053E0545D3637
3 changed files with 117 additions and 34 deletions

View file

@ -37,7 +37,26 @@
for your next project, have a custom order in mind, or just want to share your crafting experiences, 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 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 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> <h2>Contact Information</h2>
<p>Email: <a href="mailto:willowmecreations@yahoo.com">willowmecreations@yahoo.com</a><br> <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> TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>

View file

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

View file

@ -405,6 +405,42 @@ body {
color: #333; 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 Queries for Responsiveness */
@media (max-width: 768px) { @media (max-width: 768px) {
@ -521,3 +557,4 @@ body {
width: 100%; width: 100%;
} }
} }