我需要为这个 Vue 联系表单准备后端或 Node 服务器吗？

不需要。表单直接 POST 到 Formhook，因此您的 Vue 应用可以保持纯静态 SPA。用 Vite 构建，把 dist/ 文件夹部署到任何 CDN。

我能与 Pinia / Vue Router 状态一起使用吗？

可以 - 代码片段是一个自包含的 SFC，但您可以把状态提升到 Pinia，或在成功后用 Vue Router 跳转到单独的感谢路由。

如果我用 Options API 而不是怎么办？

相同的 fetch 模式可以在带 data() { return { status: 'idle' } } 的 methods.onSubmit 处理器中使用。只是语法不同 - Formhook 不在乎您用哪种 Vue 风格。

指南

Vue 联系表单（无需后端）

Vue 是一个客户端框架，但您交付的联系表单不需要在您这边有后端。可以在任何 Vue 模板中使用原生 HTML form action，或者使用带 <script setup> 和 fetch 的 Vue 3 SFC 获得内联的成功/错误 UX。

使用原生 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>

或在 Vue 中通过 fetch 提交

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

src/components/ContactForm.vue

<!-- src/components/ContactForm.vue -->
<script setup lang="ts">
import { ref } from "vue";

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));

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

  status.value = res.ok ? "ok" : "error";
  if (res.ok) form.reset();
}
</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>

工作原理

原生 HTML 表单在任何 Vue 模板中都能工作 - 它就是 markup。对于内联的成功/错误流程，SFC 代码片段使用带 ref 支持的状态机的 <script setup> 和一个对 formhook.app/f/YOUR_API_KEY 的 fetch 调用。将 Object.fromEntries(new FormData(form)) 序列化为 JSON 是最干净的载荷形式；Formhook 也接受 form-encoded 和 multipart。

之后会发生什么

提交一秒内出现在您的 Formhook 仪表盘中。
推送通知会在每个启用它的设备上触发。
从仪表盘直接回复（Pro 及以上）- 对没有发邮件能力的纯 SPA 部署特别有用。

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

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

免费开始

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

Vue 联系表单 - 常见问题

我需要为这个 Vue 联系表单准备后端或 Node 服务器吗？: 不需要。表单直接 POST 到 Formhook，因此您的 Vue 应用可以保持纯静态 SPA。用 Vite 构建，把 dist/ 文件夹部署到任何 CDN。
我能与 Pinia / Vue Router 状态一起使用吗？: 可以 - 代码片段是一个自包含的 SFC，但您可以把状态提升到 Pinia，或在成功后用 Vue Router 跳转到单独的感谢路由。
如果我用 Options API 而不是 <script setup> 怎么办？: 相同的 fetch 模式可以在带 data() { return { status: 'idle' } } 的 methods.onSubmit 处理器中使用。只是语法不同 - Formhook 不在乎您用哪种 Vue 风格。

其他框架的指南

Migrating from Formspree? See how Formhook compares.