如何使用 Formspree 为网站添加表单？

Chris Chen

8 分钟阅读

Dec 17, 2025

为网站添加表单听起来很简单。但一旦开始考虑后端，事情就变得复杂了。你需要搭建服务器、处理表单提交、发送邮件通知、过滤垃圾信息，还要找地方存储数据。对于一个简单的联系表单来说，这些工作量太大了。

Formspree 帮你处理所有这些。它是一个表单后端服务，接收表单提交的数据，并将其发送到你需要的地方。

为什么选择 Formspree？

无需后端。 将表单指向 Formspree 端点即可完成。
垃圾信息防护。 内置过滤功能，保持收件箱整洁。
多种集成方式。 通过 Email、Discord、Slack 接收通知，或将数据直接发送到 Google Sheets、Airtable 等。

在本指南中，你将学习如何设置 Formspree，并通过完整的代码示例将其集成到 Next.js 应用中。

Formspree 入门

1. 创建账户

前往 formspree.io 注册一个免费账户。免费版每月包含 50 次表单提交，对于大多数个人项目和小型网站来说完全够用。

2. 创建表单端点

登录后：

在控制台点击 Add New -> New Form
为表单命名（例如 "Contact Form"）
Formspree 会生成一个唯一的端点 URL，如 https://formspree.io/f/xyzabcde

注意：URL 的最后一部分（ xyzabcde ）是你的 Form ID，在集成到网站时会用到。

3. 集成选项

Formspree 适用于任何技术栈。在控制台中，你可以看到不同集成方式的代码示例：

HTML：使用 action 属性的传统表单
AJAX：JavaScript fetch/XHR 请求
React：使用官方 @formspree/react 库

对于静态 HTML 网站，直接复制粘贴 HTML 代码片段就能用。对于现代 React/Next.js 应用，React 库通过 hooks 和状态管理提供了更好的开发体验。

在 Next.js 中使用 Formspree

接下来，我们使用官方的 Formspree React 库在 Next.js 中构建一个联系表单。

1. 安装

安装依赖包：

npm install @formspree/react

2. 构建表单组件

创建一个新的组件文件 components/ContactForm.jsx ：

import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("xyzabcde"); // Replace with your Form ID

  if (state.succeeded) {
    return <p>Thanks for your message! We'll get back to you soon.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id='name'
          type="text"
          name="name"
          required
        />
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          id='email'
          type="email"
          name="email"
          required
        />
        <ValidationError 
          prefix="Email" 
          field="email"
          errors={state.errors}
        />
      </div>

      <div>
        <label htmlFor="message">Message</label>
        <textarea
          id='message'
          name="message"
          rows="5"
          required
        />
        <ValidationError 
          prefix="Message" 
          field="message"
          errors={state.errors}
        />
      </div>

      <button type="submit" disabled={state.submitting}>
        {state.submitting ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

export default ContactForm;

工作原理：

useForm hook 接收 Form ID，返回表单状态和提交处理函数
state.submitting 在表单提交过程中为 true
state.succeeded 在提交成功后变为 true
state.errors 包含 Formspree 返回的验证错误
ValidationError 组件自动显示字段级别的错误信息

现在可以在任意页面中使用该组件：

import ContactForm from '@/components/ContactForm';

export default function ContactPage() {
  return (
    <main>
      <h1>Contact Us</h1>
      <ContactForm />
    </main>
  );
}

你的表单现在会将提交数据发送到 Formspree，每次提交你都会收到邮件通知。

3. 可选增强功能

环境变量

直接写死 Form ID 没问题，但使用环境变量更规范。如果开发环境和生产环境使用不同的表单，这种方式尤其有用。

创建 .env.local 文件：

# Replace with your Form ID
NEXT_PUBLIC_FORM=xyzabcde

然后更新组件代码：

const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORM);

客户端验证

上面的示例使用了基本的 HTML 验证（ required 、 type="email" ）。如果需要更复杂的验证，可以考虑将 React Hook Form 或 Zod 与 Formspree 结合使用。

使用 reCAPTCHA 防护垃圾信息

Formspree 支持 reCAPTCHA 集成。在 Formspree 控制台的表单设置中启用后，添加 reCAPTCHA 组件：

import { useForm, ValidationError } from '@formspree/react';
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';

function ContactForm() {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const [state, handleSubmit] = useForm("xyzabcde", {
    data: { "g-recaptcha-response": executeRecaptcha }
  });

  // ... rest of the form
}

一键部署到 EdgeOne Pages

我们构建了一个已集成 Formspree 的 Next.js 模板，开箱即用，包含带有基本验证和错误处理功能的联系表单。只需一键即可部署到 EdgeOne Pages。

开始使用：

在 Formspree 上创建表单并复制 Form ID
点击下方部署按钮，打开部署页面
在环境变量区域，将 NEXT_PUBLIC_FORM 设置为你的 Form ID
完成部署

👉 部署到 EdgeOne Pages

整个过程大约需要 5 分钟。部署完成后，你可以自定义表单字段、样式，或为网站添加更多表单。

有问题？联系我们，我们很乐意帮助你。