a non working form
This commit is contained in:
parent
6ed0bd68fb
commit
f559d49b42
3 changed files with 117 additions and 34 deletions
21
contact.html
21
contact.html
|
@ -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>
|
||||||
|
|
91
script.js
91
script.js
|
@ -1,51 +1,78 @@
|
||||||
|
// 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;
|
||||||
|
|
||||||
function showSlides() {
|
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) {
|
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
|
// Initial call to start the slideshow
|
||||||
showSlides();
|
showSlides();
|
||||||
|
|
||||||
function toggleMenu() {
|
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 () {
|
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.");
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
39
style.css
39
style.css
|
@ -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) {
|
||||||
|
@ -520,4 +556,5 @@ body {
|
||||||
.product-card {
|
.product-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue