Astro contact forms, fully prerendered.

---
// src/components/ContactForm.astro
// Renders to plain HTML at build time — zero client JavaScript and
// nothing to hydrate. Works on a fully prerendered page.
---
<form action="https://api.formwire.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />

  <!-- A static page can't redirect after a POST, so FormWire does it.
       Point _redirect at the absolute URL of your thank-you route. -->
  <input type="hidden" name="_redirect" value="https://yoursite.com/thanks/" />

  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

---
// Progressive enhancement: the form works before the script loads;
// the fetch upgrade adds an inline status message instead of a redirect.
---
<form data-contact action="https://api.formwire.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
  <p data-status role="status" hidden></p>
</form>

<script>
  function wire() {
    const form = document.querySelector("form[data-contact]");
    if (!form || form.dataset.wired) return;
    form.dataset.wired = "true";

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const status = form.querySelector("[data-status]");
      const res = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(Object.fromEntries(new FormData(form))),
      });
      const json = await res.json();
      status.hidden = false;
      status.textContent = res.ok
        ? "Thanks — your message is on its way."
        : json.message || "Something went wrong — please try again.";
      if (res.ok) form.reset();
    });
  }

  wire();
  // With <ClientRouter /> the DOM is swapped on navigation and this module
  // doesn't re-run — astro:page-load fires after every transition, so the
  // fresh form gets wired again. The dataset guard keeps it idempotent.
  document.addEventListener("astro:page-load", wire);
</script>

---
// src/pages/contact.astro — file-based routing gives the form its page.
import Layout from "../layouts/Layout.astro";
import ContactForm from "../components/ContactForm.astro";
---
<Layout title="Contact">
  <h1>Get in touch</h1>
  <ContactForm />
</Layout>

<!-- ──────────────────────────────────────────────────────────────────
     src/pages/thanks.astro — the _redirect target. A static route like
     any other; FormWire sends the visitor here after a successful
     submit. -->

---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Thanks">
  <h1>Thanks — your message is on its way.</h1>
  <a href="/">Back to the homepage</a>
</Layout>