JavaScript contact form
with Fetch. No framework.

<form id="contact-form" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="message">Your message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

  <button type="submit">Send message</button>
</form>
<p id="form-status" role="status" aria-live="polite"></p>
<script>
  const form = document.querySelector("#contact-form");
  const status = document.querySelector("#form-status");
  const button = form.querySelector('button[type="submit"]');
  let busy = false;
  let previous = null;

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    if (busy) return;
    const body = new FormData(form);
    const fingerprint = JSON.stringify([...body.entries()]);
    if (!previous || previous.fingerprint !== fingerprint) {
      previous = { fingerprint, key: crypto.randomUUID() };
    }
    busy = true;
    button.disabled = true;
    status.textContent = "Sending…";
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 15000);
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: {
          "Accept": "application/json",
          "Idempotency-Key": previous.key
        },
        body,
        credentials: "omit",
        signal: controller.signal
      });
      if (!response.ok) {
        status.textContent = response.status === 429
          ? "The form has reached a limit. Please try later or contact us another way."
          : "The submission was not accepted. Please check your details or try later.";
        return;
      }
      status.textContent = "Your submission was received. Thank you!";
      // Keep any edits made while the request was in flight.
      if (JSON.stringify([...new FormData(form).entries()]) === fingerprint) {
        form.reset();
      }
      previous = null;
    } catch {
      status.textContent = "We could not confirm receipt. Your details are still here; retrying unchanged details reuses the same request ID.";
    } finally {
      clearTimeout(timeout);
      busy = false;
      button.disabled = false;
    }
  });
</script>