<!-- Contact Us Section -->
<section id="contact" class="contact-section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-center mb-5">
<div class="section-header">
<span class="section-badge wow fadeInUp" data-wow-delay="0.1s">Get In Touch</span>
<br>
<h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Contact <span class="highlight">Us</span></h2>
<p class="section-subtitle wow fadeInUp" data-wow-delay="0.3s">Have questions about our courses or programs? Reach out to us and our team will get back to you soon.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5 mb-5 mb-lg-0">
<div class="contact-info-wrapper">
<div class="contact-info-box wow fadeInUp" data-wow-delay="0.1s">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h4>Our Location</h4>
<p>Bhimpura No.1 (Ballia)<br>Uttar Pradesh, India 221716</p>
</div>
</div>
<div class="contact-info-box wow fadeInUp" data-wow-delay="0.2s">
<div class="contact-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="contact-text">
<h4>Call Us</h4>
<p>+91 9984878446<br></p>
</div>
</div>
<div class="contact-info-box wow fadeInUp" data-wow-delay="0.3s">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h4>Email Us</h4>
<p>[email protected]<br>[email protected]</p>
</div>
</div>
<div class="contact-info-box wow fadeInUp" data-wow-delay="0.4s">
<div class="contact-icon">
<i class="fas fa-clock"></i>
</div>
<div class="contact-text">
<h4>Working Hours</h4>
<p>Monday - Saturday: 6 AM - 6 PM<br>Sunday: Closed</p>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="contact-form-wrapper wow fadeInUp" data-wow-delay="0.5s">
<div id="contactFormMessages"></div>
<form id="contactForm" class="contact-form" method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-4">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-4">
<input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-4">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-4">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone (Optional)">
</div>
</div>
</div>
<div class="form-group mb-4">
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg btn-submit">
<span class="btn-text">Send Message</span>
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<style>
/* Contact Section Styles */
.contact-section {
position: relative;
background-color: #f8f9fa;
padding: 100px 0;
overflow: hidden;
}
.contact-info-wrapper {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
padding: 40px;
height: 100%;
}
.contact-info-box {
display: flex;
margin-bottom: 30px;
}
.contact-info-box:last-child {
margin-bottom: 0;
}
.contact-icon {
width: 50px;
height: 50px;
background-color: rgba(78, 115, 223, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #4e73df;
font-size: 20px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.contact-info-box:hover .contact-icon {
background-color: #4e73df;
color: #fff;
transform: translateY(-5px);
}
.contact-text h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.contact-text p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 0;
}
.contact-form-wrapper {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
padding: 40px;
height: 100%;
}
.form-control {
height: 50px;
border-radius: 8px;
border: 1px solid #e1e5eb;
padding: 10px 15px;
font-size: 14px;
color: #666;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #4e73df;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
textarea.form-control {
height: auto;
}
.btn-submit {
padding: 12px 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(78, 115, 223, 0.4);
}
@media (max-width: 991px) {
.contact-section {
padding: 70px 0;
}
.contact-info-wrapper {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.contact-section {
padding: 50px 0;
}
.contact-form-wrapper, .contact-info-wrapper {
padding: 25px;
}
}
</style>
<script>
// Contact Form AJAX Submission
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.getElementById('contactForm');
const messagesContainer = document.getElementById('contactFormMessages');
const submitButton = contactForm.querySelector('.btn-submit');
const buttonText = submitButton.querySelector('.btn-text');
const spinner = submitButton.querySelector('.spinner-border');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Clear previous messages
messagesContainer.innerHTML = '';
// Show loading state
submitButton.disabled = true;
buttonText.textContent = 'Sending...';
spinner.classList.remove('d-none');
// Collect form data
const formData = new FormData(contactForm);
// Send AJAX request to a new endpoint
fetch('send_contact_email.php', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Reset button state
submitButton.disabled = false;
buttonText.textContent = 'Send Message';
spinner.classList.add('d-none');
// Handle response
if (data.success) {
// Success message
const successMsg = document.createElement('div');
successMsg.className = 'alert alert-success';
successMsg.innerHTML = '<i class="fas fa-check-circle me-2"></i>' + data.message;
messagesContainer.appendChild(successMsg);
// Reset form
contactForm.reset();
// Scroll to message
messagesContainer.scrollIntoView({ behavior: 'smooth' });
} else {
// Error message
const errorMsg = document.createElement('div');
errorMsg.className = 'alert alert-danger';
let errorContent = '<i class="fas fa-exclamation-circle me-2"></i>' + data.message;
// Add specific errors if available
if (data.errors && data.errors.length > 0) {
errorContent += '<ul class="mb-0 mt-2">';
data.errors.forEach(function(error) {
errorContent += '<li>' + error + '</li>';
});
errorContent += '</ul>';
}
errorMsg.innerHTML = errorContent;
messagesContainer.appendChild(errorMsg);
// Scroll to message
messagesContainer.scrollIntoView({ behavior: 'smooth' });
}
})
.catch(error => {
// Reset button state
submitButton.disabled = false;
buttonText.textContent = 'Send Message';
spinner.classList.add('d-none');
// Connection error
const errorMsg = document.createElement('div');
errorMsg.className = 'alert alert-danger';
errorMsg.innerHTML = '<i class="fas fa-exclamation-triangle me-2"></i>An error occurred while sending your message. Please try again later.';
messagesContainer.appendChild(errorMsg);
// Log error to console
console.error('Contact form error:', error);
});
});
});
</script>
