Formulaire de contact SvelteKit (sans backend)

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <!-- honeypot: bots fill this; humans don't see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />

  <!-- optional: send users to a thank-you page after a native POST -->
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

<!-- src/routes/contact/+page.svelte -->
<script lang="ts">
  let status = $state<"idle" | "sending" | "ok" | "error">("idle");

  async function onSubmit(e: SubmitEvent) {
    e.preventDefault();
    status = "sending";

    const form = e.currentTarget as HTMLFormElement;
    const data = Object.fromEntries(new FormData(form));

    const res = await fetch("https://formhook.app/f/YOUR_API_KEY", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    status = res.ok ? "ok" : "error";
    if (res.ok) form.reset();
  }
</script>

{#if status === "ok"}
  <p>Thanks - we'll be in touch.</p>
{:else}
  <form onsubmit={onSubmit}>
    <input type="email" name="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message" required></textarea>
    <input type="text" name="_gotcha" tabindex="-1" hidden />
    <button type="submit" disabled={status === "sending"}>
      {status === "sending" ? "Sending…" : "Send"}
    </button>
    {#if status === "error"}
      <p>Something went wrong. Please try again.</p>
    {/if}
  </form>
{/if}