跳转到内容
FFormhook
← 全部指南

指南

SvelteKit 联系表单（无需后端）

SvelteKit 不需要自己的 form actions 端点来接收联系表单提交。您可以把同样的原生 HTML 表单放进 +page.svelte，或者 - 如果您想要内联的成功/错误状态 - 使用一个带 $state 和 fetch 的小型 Svelte 5 组件。

使用原生 HTML 表单

您不需要 API 路由。表单直接 POST 到 Formhook，您的框架完全不必接触提交内容。

contact.html
<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>

或在 SvelteKit 中通过 fetch 提交

如果您希望在不刷新整个页面的情况下获得客户端的成功/错误状态，使用这个版本。

src/routes/contact/+page.svelte
<!-- 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}

工作原理

原生表单代码片段可在任何 +page.svelte 中工作 - 无需 +page.server.ts，无需 SvelteKit form action 处理器。如果您想要客户端 UX，第二个代码片段使用 Svelte 5 runes ($state) 并直接 POST 到 formhook.app/f/YOUR_API_KEY。端点接受 JSON、form-encoded 或 multipart，因此将 Object.fromEntries(new FormData(form)) 序列化为 JSON 是最简单的路径。

之后会发生什么

  • 提交一秒内出现在您的 Formhook 仪表盘中。
  • 推送通知会在每个启用它的设备上触发。
  • 从仪表盘直接回复（Pro 及以上），无需搭建自己的发件基础设施。
  • 您的 SvelteKit 部署仍可保持为静态（或近静态）构建 - 联系表单不需要服务器适配器。

今天就上线您的 SvelteKit 联系表单。

免费注册、创建表单、粘贴 API 密钥。五分钟搞定。

免费开始

免费层：5 个表单 · 每月 250 次提交 · 无需信用卡。

SvelteKit 联系表单 - 常见问题

我需要写 SvelteKit form action 或 +page.server.ts 文件吗？
不需要。表单直接 POST 到 Formhook。这让您的 SvelteKit 部署保持 static-friendly - 可在 Cloudflare Pages、Vercel static、带 adapter-static 的 GitHub Pages 等任何地方运行。
如何在不刷新整个页面的情况下处理成功状态？
使用基于 fetch 的代码片段。它通过 $state 变量跟踪 idle → sending → ok/error，并在 POST 返回 200 时将表单替换为感谢消息。表单从不以原生方式提交，因此浏览器不会导航。
它能与 adapter-static / GitHub Pages 一起工作吗？
可以。因为提交去往 formhook.app，您的 SvelteKit 站点不需要服务器运行时。静态构建，部署到任何地方。

其他框架的指南

Migrating from Formspree? See how Formhook compares.