使用 Formspree 添加 React 表单

几乎每个 React 网站都需要表单来收集用户数据。Formspree ↗ 是一个后端服务，处理表单提交和存储，使开发者能够在网站上包含表单而无需编写服务端代码或函数。

在本教程中，你将使用 React 创建 <form> 组件，并将其添加到使用 create-react-app 构建的单页应用中。虽然你使用的是 create-react-app (CRA)，但这些概念适用于任何 React 框架，包括 Next.js、Gatsby 等。你将使用 Formspree 收集提交的数据，并在新提交到达时发送电子邮件通知，无需任何服务端编码。

你将把站点部署到 Cloudflare Pages。请参阅 快速入门指南 熟悉平台。

首先，在本地机器上使用 create-react-app 创建新的 React 项目。然后 创建新的 GitHub 仓库 ↗，并将 GitHub 位置附加为远程目标：

# create new project with create-react-app
npx create-react-app new-app
# enter new directory
cd new-app
# attach git remote
git remote add origin [email protected]:<username>/<repo>.git
# change default branch name
git branch -M main

现在可以在创建的 new-app 目录中修改 React 应用。

create-react-app 的起点包括一个简单的 Hello World 网站。你将添加接受姓名、电子邮件地址和消息的 Contact Us 表单。表单代码改编自 HTML 表单教程。有关 HTML 表单工作原理的深入说明和其他学习资源，请参阅 HTML 表单教程。

首先，创建一个名为 ContactForm.js 的新 react 组件，将其放在 App.js 旁边的 src 文件夹中。

project-root/
├─ package.json
└─ src/
   ├─ ContactForm.js
   ├─ App.js
   └─ ...

接下来，你将使用 Formspree 的辅助库 @formspree/react ↗ 构建表单组件。此库包含 useForm hook，简化处理表单提交事件和管理表单状态的过程。

安装：

npm i @formspree/react

yarn add @formspree/react

pnpm add @formspree/react

bun add @formspree/react

然后将以下代码片段粘贴到 ContactForm.js 文件中：

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

export default function ContactForm() {
	const [state, handleSubmit] = useForm("YOUR_FORM_ID");

	if (state.succeeded) {
		return <p>Thanks for your submission!</p>;
	}

	return (
		<form method="POST" onSubmit={handleSubmit}>
			<label htmlFor="name">Full Name</label>
			<input id="name" type="text" name="name" required />
			<ValidationError prefix="Name" field="name" errors={state.errors} />

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

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

			<button type="submit" disabled={state.submitting}>
				Submit
			</button>
			<ValidationError errors={state.errors} />
		</form>
	);
}

目前，表单包含占位符 YOUR_FORM_ID。稍后在本教程中将其替换为你自己的表单端点。

useForm hook 返回 state 对象和 handleSubmit 函数，你将它们传递给 onSubmit 表单属性。两者结合，提供通过 AJAX 提交表单数据并根据收到的响应更新表单状态的方式。

为清晰起见，此表单不包含任何样式，但在 GitHub 项目 (https://github.com/formspree/formspree-example-cloudflare-react ↗) 中可以查看如何为表单应用样式的示例。

要将此表单添加到网站，导入组件：

import ContactForm from "./ContactForm";

然后将表单作为 react 组件插入页面：

<ContactForm />

例如，你可以更新 src/App.js 文件以添加表单：

import ContactForm from "./ContactForm"; // <-- import the form component
import logo from "./logo.svg";
import "./App.css";

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
				</a>

				{/* your contact form component goes here */}
				<ContactForm />
			</header>
		</div>
	);
}

export default App;

现在你有一个包含 Contact Us 表单的单页应用，用户可填写多个字段。但你尚未将表单设置为提交到有效的表单端点。你将在下一节中完成此操作。

React 表单已完成，但当用户提交此表单时，将收到 Form not found 错误。要修复此问题，创建新的 Formspree 表单，并将其唯一 ID 复制到表单的 useForm 调用中。

要创建 Formspree 表单，请注册 Formspree 账户 ↗。然后使用 + New form（+ 新建表单） 按钮创建新表单。将新表单命名为 Contact-us form，将收件人电子邮件更新为你希望接收表单提交的邮箱。最后，选择 Create Form（创建表单）。

你将看到如何集成新表单的说明。复制表单的 hashid（URL 中最后 8 个字母数字字符）并粘贴到上面创建的 ContactForm 组件的 useForm 函数中。

组件中现在应有一行类似：

const [state, handleSubmit] = useForm("mqldaqwx");

/* replace the random-like string above with your own form's ID */

现在提交表单时，应显示 Thank You 消息。表单数据将提交到你的 Formspree.io ↗ 账户。

从这里你可以调整表单处理逻辑，更新通知电子邮件地址 ↗，或添加 Google Sheets ↗、Slack ↗ 等插件。

有关设置 Formspree 的更多帮助，请参阅以下资源：

• 有关 Formspree 的一般帮助，请参阅 Formspree 帮助站点 ↗。
• 有关在 React 中创建表单的更多帮助，请参阅 formspree-react 文档 ↗
• 有关与 Next.js、Gatsby 和 Eleventy 等流行平台集成 Formspree 的提示，请参阅 Formspree 指南 ↗。

现在可以部署项目。

若尚未完成，请在 git 中保存进度，然后将提交推送到 GitHub 仓库：

# Add all files
git add -A
# Commit w/ message
git commit -m "working example"
# Push commit(s) to remote
git push -u origin main

你的工作现在位于 GitHub 仓库中，这意味着 Pages 也可以访问它。

若这是你的第一个 Cloudflare Pages 项目，请参阅 快速入门指南 获取完整演练。选择适当的 GitHub 仓库后，必须使用以下构建设置配置项目：

• Project name（项目名称） – 你的选择
• Production branch – main
• Framework preset（框架预设） – Create React App
• Build command（构建命令） – npm run build
• Build output directory（构建输出目录） – build

选择 Save and Deploy（保存并部署） 后，Pages 项目将开始首次部署。成功后，你将获得唯一的 *.pages.dev 子域和实时演示链接。

有时设置两个表单（一个用于开发，一个用于生产）很有帮助。这样你可以开发和测试表单而不会污染生产数据集，或向客户发送测试通知。

要设置生产和开发表单，首先在 Formspree 中创建第二个表单。将其命名为 Contact Us Testing，并记下表单的 hashid ↗。

然后更改 ContactForm.js 文件中的 useForm hook，使其使用环境变量而非字符串初始化：

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

在 Cloudflare Pages 项目设置中，将 REACT_APP_FORM_ID 环境变量添加到 Production 和 Preview 环境。Production 使用原始表单的 hashid，Preview 环境使用新测试表单的 hashid：

现在，当你向 git 仓库的分支提交并推送更改时，将创建新的预览应用，表单提交到测试表单 URL。但生产网站将继续提交到原始表单 URL。

在本教程中，你使用 Cloudflare Pages 和 Formspree 构建并部署了网站来处理表单提交。你创建了一个带有表单的 React 应用，该表单与 Formspree 通信以处理和存储提交请求并发送通知。

若要查看此应用的完整源代码，可在 GitHub ↗ 上找到。

• 使用 Formspree 添加 HTML 表单
• HTML 表单