tristan/willowmecreationsV2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a non working form

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
contact.html
View file

@ -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>

91
script.js
View file

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

37
style.css
View file

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