tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

sliding modals, view transitions, accessibility, etc, etc

Browse Source
This commit is contained in:
zach
2026-03-11 15:21:43 -04:00
parent 7482cb9e9c
commit 3d46a48a7d
20 changed files with 708 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/contact.astro
View File

@@ -1,42 +1,92 @@
---
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';
export const prerender = false;
---
<Layout>
<Layout title="Contact Us">
<NavBar slot="navbar">
<NavItems slot="navItems" />
</NavBar>
<div class="row mb-4" slot="page">
<h1>Contact Us</h1>
<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">
<!-- 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>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc4F7VZjZ6ImWnNRqzMLyAWnyGQdEC3Nr2xtbzugewky239kg/formResponse" method="POST" id="contactForm" target="hidden-iframe">
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- Submit button -->
<button type="submit" class="btn btn-light">Submit</button>
<!-- 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>