dwd-projects/holywisdompublicschool.com
1
0
Fork 0
generated from dwd/boilarplate-astro-tailwind
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
dev2 siliconpin
2024-07-01 13:37:29 +00:00
parent d88ec02a13
commit 7a704b30b4
4 changed files with 88 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/ContactForm.vue
View File

@@ -1,53 +1,63 @@
<template>
<div id="contactForm" class="flex flex-col justify-center w-full">
<form @submit="saveFormData" id="formSection" action="">
<div v-if="userQurie">
<p class="text-2xl">Write your Qurie</p>
<div class="py-3">
<label for="name">Name:<span class=text-red-500>*</span></label>
<input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div>
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
<input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div class="py-3">
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
<input v-model="email" id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
</div>
<div>
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
<textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
</div>
<div class="">
<button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right" >Submit</button>
</div>
</div>
<div v-else class="flex" >
<h1 class="text-center text-black text-4xl p-16">Thank You</h1>
</div>
</form>
</div>
<div id="contactForm" class="flex flex-col justify-center w-full">
<form @submit="saveFormData" id="formSection" action="">
<div v-if="userQuery">
<p class="text-2xl">Write your Query</p>
<div class="py-3">
<label for="name">Name:<span class="text-red-500">*</span></label>
<input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
</div>
<div>
<label for="phone">Mobile:<span class="text-red-500">*</span></label>
<input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
</div>
<div class="py-3">
<label for="email">E-mail ID:<span class="text-red-500">*</span></label>
<input v-model="email" id="email" name="email" type="email" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
</div>
<div>
<label for="message">Write your Query:<span class="text-red-500">*</span></label>
<textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Query" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
</div>
<div class="">
<button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right">Submit</button>
</div>
</div>
<div v-else class="flex">
<h1 class="text-center text-black text-4xl p-16">Thank You</h1>
</div>
</form>
</div>
</template>
<script>
export default{
data(){
return{
export default {
data() {
return {
name: "",
phone: "",
email: "",
message: "",
userQurie: true,
domain: 'sample.com',
owner: 'Holly Wisdom Public School',
referrer: 'Holly Wisdom Public School',
}
userQuery: true,
domain: '',
owner: 'Holy Wisdom Public School',
referrer: '',
};
},
methods:{
saveFormData(e){
mounted() {
// Assign window-dependent values in mounted hook
if (typeof window !== 'undefined') {
this.domain = window.location.origin;
this.referrer = document.referrer;
}
},
methods: {
saveFormData(e) {
e.preventDefault();
let formData = {
data:{
data: {
name: this.name,
phone: this.phone,
email: this.email,
@@ -56,22 +66,33 @@
owner: this.owner,
domain: this.domain,
referrer: this.referrer
}
console.log(formData);
fetch(`http://api.siliconpin.com/v3/contact-form-processor/`,
{
};
// console.log(formData);
fetch(`https://api.siliconpin.com/v3/contact-form-processor/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(resData => {
// console.log("Saved Form resData", resData)
console.log("Saved Form resData", resData.success);
if(resData.success === true){
this.userQuery = false;
}
this.clearForm();
})
this.userQurie = false;
.catch(error => {
console.error("Error:", error);
});
},
clearForm() {
this.name = "";
this.phone = "";
this.email = "";
this.message = "";
}
}
}
</script>
};
</script>