Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@GI-Health
GI-Health authored Jan 1, 2025
1 parent 67f1420 commit ff8cb2e
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 12 deletions.
12 changes: 6 additions & 6 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,23 +56,23 @@ <h3><i class="fas fa-phone"></i> Call</h3>
</section>

<section class="contact-form">
<h3>You may also leave us a message below:</h3>
<form action="https://docs.google.com/spreadsheets/d/1UuSJjxPmmz96Yx_GpJ1prCJ2RNQ7lTlbg3ITWbgcJPQ/edit?gid=0#gid=0" method="post" target="hidden_iframe">
<h3>You may leave us a message below:</h3>
<form id="contact-form" action="https://docs.google.com/forms/d/e/1FAIpQLSeNkK9gTQJMbFCAYG_nqTBOSkH3gtrOOHaPrnZTSzOm6oT5tw/formResponse" method="post" target="hidden_iframe">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<input type="text" id="name" name="entry.26897133" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<input type="email" id="email" name="entry.1361176121" placeholder="Your Email" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="entry.172257648" placeholder="Your Phone Number">
<input type="text" id="phone" name="entry.715580485" placeholder="Your Phone Number">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
<textarea id="message" name="entry.645707382" placeholder="Your Message" rows="5" required></textarea>
</div>
<button type="submit" class="btn-submit">Send Message</button>
<p id="form-feedback" style="display: none;"></p> <!-- For error/success feedback -->
Expand Down
115 changes: 115 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}



27 changes: 21 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
}

}

Expand Down

0 comments on commit ff8cb2e

Please sign in to comment.