Contact form for Hugo, Jekyll and Eleventy sites

<form id="contact-form">
  <label>Name <input name="name" required maxlength="120"></label>
  <label>Email <input name="email" type="email" required maxlength="254"></label>
  <label>Message <textarea name="message" required maxlength="5000"></textarea></label>

  <!-- Honeypot: hidden from people, must stay empty -->
  <div aria-hidden="true" style="position:absolute;left:-10000px">
    <label>Leave this empty <input name="hp" tabindex="-1" autocomplete="off"></label>
  </div>

  <button type="submit">Send</button>
  <p id="contact-status" role="status"></p>
</form>

<script>
  const ENDPOINT = "https://form-route.com/api/v1/send";
  const SITE_KEY = "fr_your_site_key"; // from your FormRoute account

  const form = document.querySelector("#contact-form");
  const status = document.querySelector("#contact-status");
  const shownAt = Date.now();

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const data = new FormData(form);
    const button = form.querySelector("button[type=submit]");
    button.disabled = true;
    status.textContent = "Sending…";

    try {
      const response = await fetch(ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          siteKey: SITE_KEY,
          t: Date.now() - shownAt,   // ms since the form was shown
          hp: data.get("hp") ?? "",  // honeypot, empty for people
          name: data.get("name"),
          email: data.get("email"),
          message: data.get("message"),
        }),
      });

      if (response.ok) {
        form.reset();
        status.textContent = "Thanks, your message was sent.";
      } else {
        status.textContent = "Sorry, that didn't go through. Please try again.";
      }
    } catch {
      status.textContent = "Sorry, that didn't go through. Please try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>