92 lines
3.8 KiB
Plaintext
92 lines
3.8 KiB
Plaintext
---
|
|
export const prerender = false;
|
|
import Layout from '../layouts/Main.astro';
|
|
import NavItems from '../components/NavItems.astro';
|
|
import NavBar from '../components/NavBar.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
---
|
|
<Layout title="Contact Us">
|
|
<NavBar slot="navbar">
|
|
<NavItems slot="navItems" />
|
|
</NavBar>
|
|
<div class="row mb-4" slot="page">
|
|
<div class="col-12">
|
|
<h1>Contact Us</h1>
|
|
</div>
|
|
<div class="col-12 col-md-8 col-lg-6">
|
|
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc4F7VZjZ6ImWnNRqzMLyAWnyGQdEC3Nr2xtbzugewky239kg/formResponse" method="POST" id="contactForm" target="hidden-iframe">
|
|
|
|
<!-- Honeypot field to deter spam -->
|
|
<div style="display:none" aria-hidden="true">
|
|
<label for="honeypot">Leave this field blank</label>
|
|
<input type="text" id="honeypot" name="honeypot" tabindex="-1" autocomplete="off" />
|
|
</div>
|
|
|
|
<!-- Name input -->
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Full Name</label>
|
|
<input type="text" class="form-control" id="name" name="entry.563494744" required />
|
|
</div>
|
|
|
|
<!-- Email address input -->
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email address</label>
|
|
<input type="email" class="form-control" id="email" name="entry.577942868" aria-describedby="emailHelp" required />
|
|
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
|
</div>
|
|
|
|
<!-- Message textarea -->
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" id="message" name="entry.1640055664" rows="4" required></textarea>
|
|
</div>
|
|
|
|
<!-- Submit button -->
|
|
<button type="submit" class="btn btn-light" id="submitBtn">Submit</button>
|
|
</form>
|
|
|
|
<!-- Hidden iframe absorbs the Google Forms redirect -->
|
|
<iframe name="hidden-iframe" style="display:none" aria-hidden="true"></iframe>
|
|
|
|
<!-- Success message (hidden until submission) -->
|
|
<div id="successMsg" class="alert alert-success mt-3 d-none" role="alert">
|
|
Thanks for reaching out! We'll get back to you soon.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer slot="footer" />
|
|
</Layout>
|
|
|
|
<script>
|
|
const form = document.getElementById('contactForm') as HTMLFormElement | null;
|
|
const submitBtn = document.getElementById('submitBtn') as HTMLButtonElement | null;
|
|
const successMsg = document.getElementById('successMsg');
|
|
const honeypot = document.getElementById('honeypot') as HTMLInputElement | null;
|
|
const iframe = document.querySelector('iframe[name="hidden-iframe"]') as HTMLIFrameElement | null;
|
|
|
|
form?.addEventListener('submit', (e) => {
|
|
// Honeypot check — bail silently if filled in by a bot
|
|
if (honeypot?.value) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (!submitBtn || !successMsg) return;
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Sending...';
|
|
});
|
|
|
|
// iframe load fires after Google Forms redirects into it — treat as success
|
|
iframe?.addEventListener('load', () => {
|
|
if (!form || !submitBtn || !successMsg) return;
|
|
|
|
// Ignore the initial empty load before any submission
|
|
if (!submitBtn.disabled) return;
|
|
|
|
form.reset();
|
|
form.classList.add('d-none');
|
|
successMsg.classList.remove('d-none');
|
|
dataLayer.push({ event: 'contact_form_submit' });
|
|
});
|
|
</script> |