跳转到内容
搜索文档
↵选择
↑↓导航
ESC关闭

使用 Airtable 处理表单提交

最后更新 查看 MarkdownAgent 设置

在本教程中，你将使用 Cloudflare Workers 和 Airtable ↗ 持久化来自前端用户界面的表单提交。Airtable 是一款免费使用的电子表格解决方案，为开发者提供了易于使用的 API。Workers 将处理传入的表单提交，并使用 Airtable 的 REST API ↗ 异步将数据持久化到 Airtable base（Airtable 对电子表格的称呼）中，以便日后查阅。

完整的 Airtable 与无服务器函数集成 GIF

开始之前

所有教程都假设你已经完成了快速入门指南，该指南帮助你设置 Cloudflare Workers 账户、C3 ↗ 和 Wrangler。

1. 创建表单

在本教程中，你将构建一个 Workers 函数来处理来自联系表单的输入。本教程引用的表单将收集名、姓、电子邮件地址、电话号码、消息主题和消息内容。

查看本教程使用的简化表单示例。注意 <form> 标签的 action 参数应指向本教程中将构建并部署的 Workers 应用。

Your front-end codehtml
<form action="https://workers-airtable-form.signalnerve.workers.dev/submit" method="POST">
  <div>
    <label for="first_name">First name</label>
    <input type="text" name="first_name" id="first_name" autocomplete="given-name" placeholder="Ellen" required />
  </div>

  <div>
    <label for="last_name">Last name</label>
    <input type="text" name="last_name" id="last_name" autocomplete="family-name" placeholder="Ripley" required />
  </div>

  <div>
    <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
    </div>
  </div>

  <div>
    <label for="phone">
      Phone
      <span>Optional</span>
    </label>
    <input type="text" name="phone" id="phone" autocomplete="tel" placeholder="+1 (123) 456-7890" />
  </div>

  <div>
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Your example subject" required />
  </div>

  <div>
    <label for="message">
      Message
      <span>Max 500 characters</span>
    </label>
    <textarea id="message" name="message" rows="4" placeholder="Tenetur quaerat expedita vero et illo. Tenetur explicabo dolor voluptatem eveniet. Commodi est beatae id voluptatum porro laudantium. Quam placeat accusamus vel officiis vel. Et perferendis dicta ut perspiciatis quos iste. Tempore autem molestias voluptates in sapiente enim doloremque." required></textarea>
  </div>

  <div>
    <button type="submit">
      Submit
    </button>
  </div>
</form>

2. 创建 Worker 项目

要处理表单提交，创建并部署一个 Worker，解析传入的表单数据并准备提交到 Airtable。

创建新的 airtable-form-handler Worker 项目：

npm create cloudflare@latest -- airtable-form-handler

进行设置时，请选择以下选项：

  • 对于 What would you like to start with?，选择 Hello World example。
  • 对于 Which template would you like to use?，选择 Worker only。
  • 对于 Which language do you want to use?，选择 JavaScript。
  • 对于 Do you want to use git for version control?，选择 Yes。
  • 对于 Do you want to deploy your application?，选择 No（部署前我们还会做一些修改）。

然后，进入新创建的目录：

cd airtable-form-handler

3. 配置 Airtable base

Worker 完成后，它将通过 Airtable REST API 将数据发送到 Airtable base。

如果没有 Airtable 账户，请创建一个（免费计划足以完成本教程）。在 Airtable 仪表板中，通过选择 Start from scratch（从零开始） 创建新 base。

创建新 base 后，将其设置为与前端表单配合使用。删除现有列，创建六列，字段类型如下：

Field name Airtable field type
First Name "Single line text"
Last Name "Single line text"
Email "Email"
Phone Number "Phone number"
Subject "Single line text"
Message "Long text"

注意字段名称区分大小写。如果更改字段名称，需要在教程后面向 Airtable 发出的 API 请求中完全匹配新字段名称。最后，你可以可选地重命名表格——默认名称类似 Table 1。在以下代码中，我们假设表格已重命名为更具描述性的名称，如 Form Submissions。

接下来，前往 Airtable API 页面 ↗ 并选择新 base。注意，必须登录 Airtable 才能查看 base 信息。在 API 文档页面，找到 Airtable base ID（Airtable 数据库 ID）。

你还需要创建 Personal access token（个人访问令牌），用于访问 Airtable base。可以访问 Airtable 网站上的 Personal access tokens ↗ 页面创建新 token。确保按以下方式配置 token：

  • Scope：token 必须设置 data.records:write 作用域
  • Access：应授予本教程中使用的 base 访问权限

生成的 access token 现在应设置到你的应用中。要在代码库中使用该 token，使用 wrangler secret 命令。secret 命令加密并存储环境变量供函数使用，不会向用户暴露。

运行 wrangler secret put，以 AIRTABLE_ACCESS_TOKEN 作为 secret 名称：

npx wrangler secret put AIRTABLE_ACCESS_TOKEN
Enter the secret text you would like assigned to the variable AIRTABLE_ACCESS_TOKEN on the script named airtable-form-handler:
******
🌀  Creating the secret for script name airtable-form-handler
✨  Success! Uploaded secret AIRTABLE_ACCESS_TOKEN.

继续之前，请确认你从 Airtable 获得的密钥：

  1. Airtable Table Name（Airtable 表名称）：表格名称，如 Form Submissions。
  2. Airtable Base ID（Airtable Base ID）：在 base API 页面顶部找到的字母数字 base ID。
  3. Airtable Access Token（Airtable 访问令牌）：用户创建的 Personal Access Token，用于访问新 Airtable base 的信息。

4. 向 Airtable 提交数据

Airtable base 设置完成，与 API 通信所需的密钥和 ID 就绪后，现在将设置 Worker 以将表单数据持久化到 Airtable。

在 Worker 项目的 index.js 文件中，用能够响应请求的 Workers fetch 处理程序替换默认代码。当请求的 URL 路径名为 /submit 时，你将处理新的表单提交，否则返回 404 Not Found 响应。

export default {
	async fetch(request, env) {
		const url = new URL(request.url);
		if (url.pathname === "/submit") {
			await submitHandler(request, env);
		}
		return new Response("Not found", { status: 404 });
	},
};

submitHandler 有两个功能。首先，它将解析来自 HTML5 表单的表单数据。数据解析完成后，使用 Airtable API 将新行（新表单提交）持久化到表格：

async function submitHandler(request, env) {
	if (request.method !== "POST") {
		return new Response("Method Not Allowed", {
			status: 405,
		});
	}
	const body = await request.formData();

	const { first_name, last_name, email, phone, subject, message } =
		Object.fromEntries(body);

	// The keys in "fields" are case-sensitive, and
	// should exactly match the field names you set up
	// in your Airtable table, such as "First Name".
	const reqBody = {
		fields: {
			"First Name": first_name,
			"Last Name": last_name,
			Email: email,
			"Phone Number": phone,
			Subject: subject,
			Message: message,
		},
	};
	await createAirtableRecord(env, reqBody);
}

// Existing code
// export default ...

此函数的大部分内容涉及解析请求体（作为请求一部分发送的数据），有两点需要注意。首先，如果发送到此函数的 HTTP 方法不是 POST，你将返回状态码为 405 Method Not Allowed ↗ 的新响应。

变量 reqBody 代表字段集合，即 Airtable 表格中每列的键值对。通过将 reqBody 格式化为包含 fields 集合的对象，你将在表格中创建一条新记录，每个字段都有对应值。

然后调用 createAirtableRecord（接下来将定义的函数）。createAirtableRecord 函数接受 body 参数，该参数符合 Airtable API 要求的格式——即包含 fields 下键值对的 JavaScript 对象，代表要在表格上创建的单条记录：

async function createAirtableRecord(env, body) {
	try {
		const result = fetch(
			`https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(env.AIRTABLE_TABLE_NAME)}`,
			{
				method: "POST",
				body: JSON.stringify(body),
				headers: {
					Authorization: `Bearer ${env.AIRTABLE_ACCESS_TOKEN}`,
					"Content-Type": "application/json",
				},
			},
		);
		return result;
	} catch (error) {
		console.error(error);
	}
}

// Existing code
// async function submitHandler
// export default ...

要向 Airtable 发出经过身份验证的请求，需要提供四个代表 Airtable 账户、base 和表格名称数据的常量。你已使用 wrangler secret 设置 AIRTABLE_ACCESS_TOKEN，因为它是应加密的值。Airtable base ID 和表格名称以及 FORM_URL 是可以在 GitHub 等公开位置共享的值。使用 Wrangler 的 vars 功能从 Wrangler 文件传递公共环境变量。

在 Wrangler 文件末尾添加 vars 表：

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "workers-airtable-form",
	"main": "src/index.js",
	// Set this to today's date
	"compatibility_date": "2026-08-17",
	"vars": {
		"AIRTABLE_BASE_ID": "exampleBaseId",
		"AIRTABLE_TABLE_NAME": "Form Submissions"
	}
}
"$schema" = "./node_modules/wrangler/config-schema.json"
name = "workers-airtable-form"
main = "src/index.js"
# Set this to today's date
compatibility_date = "2026-08-17"

[vars]
AIRTABLE_BASE_ID = "exampleBaseId"
AIRTABLE_TABLE_NAME = "Form Submissions"

所有字段提交完成后，是时候部署 Workers 无服务器函数并让表单与其通信了。首先，发布 Worker：

Deploy your Workersh
npx wrangler deploy

Worker 项目将部署到唯一 URL——例如 https://workers-airtable-form.cloudflare.workers.dev。这代表前端表单 action 属性的第一部分——第二部分是表单处理程序的路径，即 /submit。在前端 UI 中，按如下方式配置 form 标签：

<form
	action="https://workers-airtable-form.cloudflare.workers.dev/submit"
	method="POST"
	class="..."
>
	<!-- The rest of your HTML form -->
</form>

部署新表单后（如需帮助创建表单，请参阅 HTML 表单 教程），你应该能够提交新表单并在 Airtable 中立即看到值出现：

完整的 Airtable 与无服务器函数集成示例 GIF

结论

完成本教程后，你创建了一个能够接受表单提交并将其持久化到 Airtable 的 Worker。你已学会如何解析表单数据、设置环境变量，以及使用 fetch API 向 Worker 外部的外部服务发出请求。

相关资源

这篇文档对您有帮助吗？