generated from dwd/boilarplate-astro-tailwind
pull/2/head
parent
d094ff89d8
commit
7b514fa08c
|
|
@ -64,50 +64,89 @@ import Layout from "../layouts/Layout.astro";
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const contactForm = document.getElementById('contactForm');
|
|
||||||
const formSection = document.getElementById('formSection');
|
|
||||||
const thankYouSection = document.getElementById('thankYouSection');
|
|
||||||
const nameInput = document.getElementById('name');
|
|
||||||
const emailInput = document.getElementById('email');
|
|
||||||
const phoneInput = document.getElementById('phone');
|
|
||||||
const messageInput = document.getElementById('message');
|
|
||||||
|
|
||||||
contactForm.addEventListener('submit', async function (event) {
|
document.getElementById('formSection').addEventListener('submit', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
let data = {
|
|
||||||
data:{
|
const formData = {
|
||||||
name: nameInput.value,
|
data: {
|
||||||
phone: phoneInput.value,
|
name: document.getElementById('name').value,
|
||||||
email: emailInput.value,
|
phone: document.getElementById('phone').value,
|
||||||
message: messageInput.value
|
email: document.getElementById('email').value,
|
||||||
|
message: document.getElementById('message').value
|
||||||
},
|
},
|
||||||
owner: "Holly Wisdom Public School",
|
owner: 'owner_value',
|
||||||
domain: window.location.origin,
|
domain: 'domain_value',
|
||||||
referrer: "Holly Wisdom Public School"
|
referrer: document.referrer
|
||||||
}
|
};
|
||||||
console.log("Form Data", data)
|
|
||||||
const url = 'https://api.siliconpin.com/v3/contact-form-processor/';
|
fetch('https://192.168.0.166/v3/contact-form-processor/', {
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify(data)
|
body: JSON.stringify(formData)
|
||||||
});
|
})
|
||||||
if (response.ok) {
|
.then(response => response.json())
|
||||||
console.log('Form data submitted successfully');
|
.then(data => {
|
||||||
formSection.style.display = 'none';
|
if (data.success) {
|
||||||
thankYouSection.style.display = 'block';
|
alert('Data submitted successfully');
|
||||||
} else {
|
} else {
|
||||||
console.error('Failed to submit form data');
|
alert('Error: ' + data.message);
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('An error occurred:', error);
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
alert('An error occurred while submitting the form');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// const contactForm = document.getElementById('contactForm');
|
||||||
|
// const formSection = document.getElementById('formSection');
|
||||||
|
// const thankYouSection = document.getElementById('thankYouSection');
|
||||||
|
// const nameInput = document.getElementById('name');
|
||||||
|
// const emailInput = document.getElementById('email');
|
||||||
|
// const phoneInput = document.getElementById('phone');
|
||||||
|
// const messageInput = document.getElementById('message');
|
||||||
|
|
||||||
|
// contactForm.addEventListener('submit', async function (event) {
|
||||||
|
// event.preventDefault();
|
||||||
|
// let data = {
|
||||||
|
// data:{
|
||||||
|
// name: nameInput.value,
|
||||||
|
// phone: phoneInput.value,
|
||||||
|
// email: emailInput.value,
|
||||||
|
// message: messageInput.value
|
||||||
|
// },
|
||||||
|
// owner: "Holly Wisdom Public School",
|
||||||
|
// domain: window.location.origin,
|
||||||
|
// referrer: "Holly Wisdom Public School"
|
||||||
|
// }
|
||||||
|
// console.log("Form Data", data)
|
||||||
|
// const url = 'https://api.siliconpin.com/v3/contact-form-processor/';
|
||||||
|
// try {
|
||||||
|
// const response = await fetch(url, {
|
||||||
|
// method: 'POST',
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type': 'application/json'
|
||||||
|
// },
|
||||||
|
// body: JSON.stringify(data)
|
||||||
|
// });
|
||||||
|
// if (response.ok) {
|
||||||
|
// console.log('Form data submitted successfully');
|
||||||
|
// formSection.style.display = 'none';
|
||||||
|
// thankYouSection.style.display = 'block';
|
||||||
|
// } else {
|
||||||
|
// console.error('Failed to submit form data');
|
||||||
|
// }
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error('An error occurred:', error);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.gradintBack {
|
.gradintBack {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Form Submission</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form id="formSection">
|
||||||
|
<p class="text-2xl py-4">Write your Query</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" required />
|
||||||
|
</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" required />
|
||||||
|
</div>
|
||||||
|
<div class="py-3">
|
||||||
|
<label for="email">E-mail ID:<span class="text-red-500">*</span></label>
|
||||||
|
<input id="email" name="email" type="email" placeholder="Enter your E-mail ID" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message">Write your Query:<span class="text-red-500">*</span></label>
|
||||||
|
<textarea id="message" name="message" rows="7" placeholder="Write your Query" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="submit" value="Submit" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<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: 'owner_value', // Replace with appropriate value
|
||||||
|
domain: 'domain_value', // Replace with appropriate value
|
||||||
|
referrer: document.referrer
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch('your_backend_endpoint', { // Replace with your backend endpoint URL
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(formData)
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
alert('Data submitted successfully');
|
||||||
|
} else {
|
||||||
|
alert('Error: ' + data.message);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
alert('An error occurred while submitting the form');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue