指南
Nuxt 联系表单（无需后端）
Nuxt 不需要服务器路由来接收联系表单提交。把原生 HTML 表单放进 Nuxt 页面，或者 - 如果您想要客户端反馈 - 使用一个带 $fetch 和 ref（用于跟踪提交状态）的 Vue 3 <script setup> 处理器。
使用原生 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>或在 Nuxt 中通过 fetch 提交
如果您希望在不刷新整个页面的情况下获得客户端的成功/错误状态，使用这个版本。
pages/contact.vue
<!-- pages/contact.vue -->
<script setup lang="ts">
type Status = "idle" | "sending" | "ok" | "error";
const status = ref<Status>("idle");
async function onSubmit(e: Event) {
e.preventDefault();
status.value = "sending";
const form = e.target as HTMLFormElement;
const data = Object.fromEntries(new FormData(form));
try {
await $fetch("https://formhook.app/f/YOUR_API_KEY", {
method: "POST",
body: data,
});
status.value = "ok";
form.reset();
} catch {
status.value = "error";
}
}
</script>
<template>
<p v-if="status === 'ok'">Thanks - we'll be in touch.</p>
<form v-else @submit="onSubmit">
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
<input type="text" name="_gotcha" tabindex="-1" hidden />
<button type="submit" :disabled="status === 'sending'">
{{ status === "sending" ? "Sending…" : "Send" }}
</button>
<p v-if="status === 'error'">Something went wrong. Please try again.</p>
</form>
</template>工作原理
原生表单代码片段可在任何 Nuxt 页面 (pages/contact.vue) 中工作，无需对应的 server/api 路由。对于客户端成功/错误状态，第二个代码片段使用 $fetch - Nuxt 内置的 fetch 包装器 - 和一个 ref 来驱动状态机。两者都直接到 formhook.app/f/YOUR_API_KEY。
之后会发生什么
- 提交一秒内出现在您的 Formhook 仪表盘中。
- 推送通知会在每个启用它的设备上触发。
- 从仪表盘直接回复（Pro 及以上）- 不需要 Nuxt 服务器 API 或事务性邮件集成。
今天就上线您的 Nuxt 联系表单。
免费注册、创建表单、粘贴 API 密钥。五分钟搞定。
免费开始免费层：5 个表单 · 每月 250 次提交 · 无需信用卡。
Nuxt 联系表单 - 常见问题
- 我需要为表单写一个 Nitro 服务器路由吗？
- 不需要。表单直接 POST 到 Formhook，这意味着如果您愿意，您的 Nuxt 站点可以保持完全静态。无需维护 /server/api/contact.ts。
- 它能与 `nuxt generate`（静态站点）一起工作吗？
- 可以。联系表单只是一个 HTML POST - 它不在乎您 Nuxt 站点的其余部分是静态渲染还是在边缘渲染。
- 我把 API 密钥放在哪里？提交它安全吗？
- API 密钥是每个表单的标识符，并非传统意义上的秘密 - 它本来就暴露在每个访问者的 HTML 中。把它当作公共端点标识符，并依靠 Formhook 的每表单速率限制、CORS allowlist 和 Turnstile 开关进行保护。
其他框架的指南
Migrating from Formspree? See how Formhook compares.