diff --git a/contact.html b/contact.html index a6df70b..17db2fc 100644 --- a/contact.html +++ b/contact.html @@ -56,23 +56,23 @@

Call

-

You may also leave us a message below:

-
+

You may leave us a message below:

+
- +
- +
- +
- +
diff --git a/script.js b/script.js index fd40662..96298bc 100644 --- a/script.js +++ b/script.js @@ -76,3 +76,118 @@ document.addEventListener("click", (event) => { }); slideInTextElements.forEach((el) => observer.observe(el)); + + + +// Listen for the form submission event +document.getElementById('contact-form').addEventListener('submit', function (e) { + e.preventDefault(); // Prevent the form from submitting normally + + // Get the values from the form fields + const nameField = document.getElementById('name'); + const emailField = document.getElementById('email'); + const phoneField = document.getElementById('phone'); + const messageField = document.getElementById('message'); + const feedback = document.getElementById('form-feedback'); // Element to display feedback messages + + const name = nameField.value.trim(); + const email = emailField.value.trim(); + const phone = phoneField.value.trim(); + const message = messageField.value.trim(); + + // Clear previous invalid class + nameField.classList.remove('invalid'); + emailField.classList.remove('invalid'); + phoneField.classList.remove('invalid'); + messageField.classList.remove('invalid'); + + // Simple validation to ensure all fields are filled out correctly + if (name && isValidEmail(email) && isValidPhone(phone) && message) { + // Display success feedback + feedback.style.color = 'green'; + feedback.textContent = 'Form submitted successfully!'; + feedback.style.display = 'block'; + + // Call the function to submit the form to Google Forms using iframe + handleFormSubmit(); + + } else { + // Show error feedback if validation fails + feedback.style.color = 'red'; + feedback.textContent = 'Please fill out highlighted fields correctly.'; + feedback.style.display = 'block'; + + // Highlight invalid fields in red + if (!name) nameField.classList.add('invalid'); + if (!isValidEmail(email)) emailField.classList.add('invalid'); + if (!isValidPhone(phone)) phoneField.classList.add('invalid'); + if (!message) messageField.classList.add('invalid'); + } +}); + +// Function to validate email +function isValidEmail(email) { + // Regular expression for basic email validation (requires both "@" and ".") + const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + return emailPattern.test(email); +} + +function isValidPhone(phone) { + // Array of valid prefixes + const validPrefixes = [ + "101", "110", "701", "702", "703", "704", "705", "706", "707", "708", + "709", "710", "711", "712", "713", "714", "715", "716", "717", "718", + "719", "720", "721", "722", "723", "724", "725", "726", "727", "728", + "729", "730", "731", "732", "733", "734", "735", "736", "737", "738", + "739", "740", "741", "742", "743", "744", "745", "746", "747", "748", + "750", "751", "752", "753", "754", "755", "756", "757", "758", "759", + "760", "761", "762", "763", "764", "765", "766", "767", "768", "769", + "770", "771", "772", "773", "774", "775", "776", "777", "778", "779", + "780", "781", "782", "783", "784", "785", "786", "787", "788", "789", + "790", "791", "792", "793", "794", "795", "796", "797", "798", "799", + "201", "40", "41", "42", "43", "44", "45", "46", "50", "51", "52", "53", + "54", "55", "56", "57", "58", "59", "60", "61", "62", "64", "66", "67", + "68", "69", "111","112", "113", "114", "115", "202", "203", "204", + "205", "206", "207", "208", "209", +]; + + // Regex to validate structure + const phoneRegex = /^(?:\+254|254|0)?[0-9]{9}$/; + + if (!phoneRegex.test(phone)) return false; + + const normalizedPhone = phone.replace(/^\+254|^254|^0/, ""); + const prefix = normalizedPhone.substring(0, normalizedPhone.length === 9 ? 3 : 2); + + return validPrefixes.includes(prefix); +} + +// Function to handle form submission without redirect +function handleFormSubmit() { + var form = document.getElementById("contact-form"); + event.preventDefault(); + + // Create a hidden iframe to submit the form to Google Forms without redirecting + var iframe = document.createElement("iframe"); + iframe.name = "hidden_iframe"; // The iframe name is used as the form's target + iframe.style.display = "none"; // Hide the iframe + form.target = "hidden_iframe"; // Set the form's target to the iframe + + // Append the iframe to the body of the document + document.body.appendChild(iframe); + + // Submit the form + form.submit(); + + // Show a custom success message on the page + document.getElementById("form-feedback").style.display = "block"; // Display the custom confirmation message + + // Optionally reset form fields after submission + setTimeout(() => { + form.reset(); // Reset form fields + document.getElementById("form-feedback").style.display = "none"; // Display success message + }, 2000); +} + + + diff --git a/style.css b/style.css index d91b050..551288e 100644 --- a/style.css +++ b/style.css @@ -186,10 +186,10 @@ nav ul li a.active { z-index: 1; position: relative; order: 1; /* Ensure text comes first */ - opacity: 0; /* Hidden initially */ - transform: translateX(100%); /* Positioned off-screen to the rt */ - transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth animation */ -} + opacity: 0; /* Hidden initially */ + transform: translateX(100%); /* Positioned off-screen to the rt */ + transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth animation */ + } /* Active state: Bring the text into view */ .feature-text.active { @@ -223,6 +223,11 @@ nav ul li a.active { border-radius: 8px; flex: 1; } + .profile { + border-radius: 8px; + background: var(--background-color2); + margin: 10px; + } .profile-section { display: flex; flex-direction: column; @@ -276,7 +281,7 @@ nav ul li a.active { h3 { text-align: center; font-size: 1em; - margin: 0; + margin: 3px; color: var(--secondary-color); } h4 { @@ -410,6 +415,8 @@ nav ul li a.active { display: block; margin-bottom: 0.5rem; color: var(--secondary-color); + position: absolute; /* Remove from the document flow */ + clip: rect(0 0 0 0); /* Clip the label so it doesn't appear visually */ } .contact-form input, @@ -440,6 +447,9 @@ nav ul li a.active { .contact-form .btn-submit:hover { background-color: var(--secondary-color); } +.invalid { + border: 2px solid red !important; +} footer { @@ -542,12 +552,13 @@ nav ul li a.active { .profile-section section { /* width: 45%; */ } - .profile { + .profile { display: flex; flex-direction: row; justify-content: space-between; width: 50%; margin: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .profile-image { margin: 0 20px; @@ -593,6 +604,10 @@ nav ul li a.active { .feature-image { order: 0; /* Default order for horizontal layout */ } + + .contact-form label { + position: relative; /* Remove from the document flow */ + } }