generated from dwd/boilarplate-astro-tailwind
114 lines
6.4 KiB
Plaintext
114 lines
6.4 KiB
Plaintext
---
|
||
import Layout from "../layouts/Layout.astro";
|
||
---
|
||
<Layout title="Holy Wisdom Public School - Contact Us">
|
||
<main>
|
||
<div>
|
||
<section class="container-fluid gradintBack">
|
||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||
<div class="w-full">
|
||
<img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
|
||
</div>
|
||
<div class="flex flex-col w-full">
|
||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Preschool!</h1>
|
||
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2>
|
||
<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3>
|
||
<!-- <div class="flex flex-row place-content-between">
|
||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 my-10">
|
||
<div class="">
|
||
<h1 class="text-2xl">Reach Out to Holywisdom Preschool</h1>
|
||
<p class="">Contacting Holywisdom Preschool is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 my-16">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 bg-[#47ae6a50] justify-center p-6 rounded-2xl gap-x-10">
|
||
<div class="flex flex-col justify-center">
|
||
<p class="text-2xl md:text-3xl lg:text-3xl text-[#3084b5]">Have You Any Doubt or Any Quries</p>
|
||
<p class="text-justify text-lg pt-4 ">Feel the freedom to write any questions or uncertainties—our door is always open for your curiosity. Your queries are more than welcome in our space of knowledge and assistance. Let your questions find their answers, and let the conversation unfold. We're here for you!</p>
|
||
</div>
|
||
<div id="contactForm" class="flex flex-col justify-center w-full">
|
||
<form id="formSection" action="">
|
||
<p class="text-2xl py-4">Write your Qurie</p>
|
||
<div class="pb-3">
|
||
<label for="name">Name:<span class=text-red-500>*</span></label>
|
||
<input id="name" name="name" type="text" placeholder="Enter your Name" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"/>
|
||
</div>
|
||
<div>
|
||
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
|
||
<input id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"/>
|
||
</div>
|
||
<div class="py-3">
|
||
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
|
||
<input id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"/>
|
||
</div>
|
||
<div>
|
||
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
|
||
<textarea id="message" name="message" rows="7" placeholder="Write your Qurie" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"></textarea>
|
||
</div>
|
||
<div class="">
|
||
<input type="submit" value="Submit" class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right"/>
|
||
</div>
|
||
</form>
|
||
<div class="flex" id="thankYouSection" style="display: none;">
|
||
<h1 class="text-center text-black text-4xl">Thank You</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</Layout>
|
||
<script is:inline>
|
||
document.getElementById('formSection').addEventListener('submit', function(event) {
|
||
event.preventDefault();
|
||
|
||
const formData = {
|
||
data: {
|
||
name: document.getElementById('name').value,
|
||
phone: document.getElementById('phone').value,
|
||
email: document.getElementById('email').value,
|
||
message: document.getElementById('message').value
|
||
},
|
||
owner: 'Holy Wisdom Public School',
|
||
domain: window.location.origin,
|
||
referrer: document.referrer
|
||
};
|
||
|
||
fetch('https://api.siliconpin.com/v3/contact-form-processor/', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(formData)
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
// console.log('Data submitted successfully');
|
||
if(data.success === true){
|
||
document.getElementById('formSection').style.display = 'none';
|
||
document.getElementById('thankYouSection').style.display = 'block';
|
||
}
|
||
console.log(data.success)
|
||
} else {
|
||
// console.log('Error: ' + data.message);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
// console.error('Error:', error);
|
||
// console.log('An error occurred while submitting the form');
|
||
});
|
||
});
|
||
|
||
</script>
|
||
<style>
|
||
.gradintBack {
|
||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||
}
|
||
</style>
|