使用 Webflow Logic 在 Airtable 中建立条目

使用 Logic 的 Make HTTP 请求块将 Webflow 表单提交的数据发送到 Airtable。

通过 Airtable,您可以生成并监督企业重要信息的数据库。Logic 可让您将表单提交的数据(例如潜在客户的联系方式)传输到 Airtable,从而将您的 Webflow 网站链接到您的业务数据库。

开始之前: 如果你还没有这样做, 创建 Airtable 帐户气垫底座。您还需要将一个表单集成到您的 Webflow 站点中,其中的字段与您的 Airtable 表相匹配。

在本教程中,我们将深入探讨:

  1. 配置 Airtable API 密钥的步骤
  2. 为逻辑流程建立身份验证的方法
  3. 定位您的 Airtable documentation
  4. 设置 HTTP 请求
  5. 测试并部署您的流程
  6. 解决流程中出现的任何问题
内部提示: Logic 还使用 Make HTTP 请求块或传入 webhook 触发器促进数据从 Airtable 同步到 Webflow CMS。深入了解使用 Logic 发出 HTTP 请求的过程。

创建你的 Airtable API 密钥

与密码类似,API 密钥(有时称为“访问令牌”)可识别向 API 发出 HTTP 请求的站点或应用程序。Airtable API 密钥对于将数据发送到 Airtable 至关重要。

要生成您的 Airtable API 密钥:

  1. 导航到您的 Airtable 仪表板
  2. 点击您的个人资料图标并选择 帐户
  3. 滚动到 API 部分并点击 创建代币
  4. 轻按 创建新令牌
  5. 为你的代币指定一个名称
  6. 从下拉菜单中为此 API 密钥选择一个操作(至少 数据.记录:写入 是将数据发送到 Airtable 所必需的)
  7. 选择一个基地并指定您希望发送数据的 Airtable 基地
  8. 点击 创建代币,复制你的 API 密钥,并确保您 保持此标签打开!

为您的逻辑流程配置身份验证

  1. 在 Webflow Designer 的新选项卡中启动您的网站
  2. 在设计器画布上选择您的表单并访问 表单设置
  3. 选择 逻辑 来自 来源 落下
  4. 点击 添加新流程
  5. 姓名 字段,并可选择在 描述 场地
  6. 拖动 发出 HTTP 请求 块到流程编辑器画布并提供名称(例如,“在 Airtable 中创建新的潜在客户记录”)
  7. API 令牌 来自 验证 落下
  8. 选择 标头 来自 添加 落下
  9. 在“授权”中输入 标头 场地
  10. 点击 选择凭证 > 添加新凭证
  11. 姓名 字段,并可选择在其中包含描述 描述 场地
  12. 输入“Bearer {API 密钥}“ 在里面 代币 领域,取代 {API 密钥} 使用从 Airtable 复制的 API 密钥
  13. 点击 创造 保留新的凭证,并确保您 保持此标签打开!
专业提示: 您还可以选择通过以下方式将表单链接到新的逻辑流程: 逻辑面板 > 流程 选项卡。探索有关 Logic 中表单提交触发器的更多信息。
当选择逻辑作为源时,表单设置中会出现添加新流或浏览流的选项。
您可以通过“表单设置”、“表单块设置”或“ 逻辑面板 > 流程 标签。
在添加到下拉菜单中选择“标题”,并在标题输入字段中输入“授权”。
“新凭证”模式窗口显示 API 凭证的名称、描述、类型和值的字段。
对于使用承载身份验证的 API(如 Airtable),您必须在 Token 字段中的 API 密钥之前输入“Bearer”。

查找您的 Airtable 文档

  1. 重新访问您的 Airtable 基地
  2. 使用权 帮助 并选择 API 1TP32说明 在其他资源下
  3. 选择要创建记录的表
  4. 点击 创建记录 — 与您的表格相关的示例 API 请求将显示在右侧

至关重要的: Airtable 的 API documentation 针对每个 Airtable 基础进行了定制,因此请确保您在预期的基础上添加记录。

设置 HTTP 请求

现在您已配置了逻辑流程和 Airtable 身份验证凭据,请重新访问 Webflow 以在流程中建立 HTTP 请求。每次访问者提交您网站的表单时,此 HTTP 请求设置都会在您的 Airtable 表中生成一条新记录。

记住: 如果你关闭了 Webflow 网站打开的标签页,请导航至 逻辑面板 > 流程 选项卡并选择在前面步骤中配置的流程。点击 发出 HTTP 请求 流程编辑器画布上的块以访问块设置并按照接下来的步骤进行操作。
  1. 打开 请求方法 下拉并选择 邮政
  2. 插入“https://api.airtable.com/v0/{ID}/{表名}“ 在里面 网址 领域,替代 {ID} 您的餐桌 ID 和 {表名}
  3. 为您的表格提供标题
  4. 按 ””符号旁边 标头 生成新的标题 
  5. 在“content-type”中输入 姓名 框和“application/json” 价值 盒子
  6. 将 Airtable API documentation 中的代码块插入到 身体 部分 - 它将具有与此类似的结构(但使用来自现有 Airtable 记录的数据):

    { “名字”:“XYZ”, “姓氏”:“XYZ”, “电子邮件”:“[email protected]”, “状态”:“新线索” }
    

之后,您必须在 HTTP 请求中包含实时数据以捕获表单提交的详细信息: 

  1. 从当前的 Airtable 记录中删除值,并将光标置于 身体 区域
  2. 点击紫色“”图标并选择相关的动态表单字段(例如姓名、电子邮件等)

基本的: 确保对 URL 部分中的表标题中的任何空格或特殊字符进行编码。

正文字段包含动态表单字段,用于从表单提交中捕获姓氏、名字和电子邮件地址。 
用于将数据发送到 Airtable 的完整 HTTP 请求块设置包括身份验证、请求方法、URL、标头和请求正文,其中包含用于从 Webflow 表单中捕获数据的变量。 
从 Logic 的 Make HTTP 请求块向 Airtable 发出完整的 POST 请求。

测试并实施流程的步骤

  1. 运行测试以完成设置 
  2. 在相应的输入框中输入样本值
  3. 运行测试 
  4. 取消 或者 应用数据 关闭测试窗口
  5. 发布 
  6. 点击 发布阶段流程
  7. 发布您的网站
提醒: 如果测试过程中出现错误消息,请按照我们的故障排除步骤操作,然后重复上述操作。获取有关测试 HTTP 请求的更多详细信息。

如何解决流程问题

如果在测试流程时遇到错误,请尝试以下步骤:

  • 设置访问凭证时,请确保在 API 密钥前包含“Bearer”(以及空格)(例如“Bearer 123456789”)
  • 验证您的请求 URL 是否具有表的准确 ID 和名称
  • 使用类似以下免费工具检查请求正文中的问题 JSONLint 
麦宜云
Ewan Mak 的最新帖子 (查看全部)