AJAX contact form (no page reload)

<form id="contact" class="space-y-3">
  <input type="email" name="email" required placeholder="Email" />
  <textarea name="message" required placeholder="Message"></textarea>
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         aria-hidden="true" style="position:absolute;left:-9999px" />
  <button type="submit">Send</button>
  <p id="status" role="status"></p>
</form>
<script>
  const form = document.getElementById("contact");
  const status = document.getElementById("status");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    status.textContent = "Sending…";
    const body = Object.fromEntries(new FormData(form).entries());
    const res = await fetch("https://formheron.com/f/YOUR_KEY", {
      method: "POST",
      headers: { "content-type": "application/json", accept: "application/json" },
      body: JSON.stringify(body),
    });
    const data = await res.json().catch(() => ({}));
    if (res.ok) {
      status.textContent = "Sent. We will get back to you.";
      form.reset();
    } else {
      status.textContent = data.message || data.code || "Could not send.";
    }
  });
</script>