从静态html表单在airtable base中创建一行 Airtable 表单

问题描述

我有一个静态登录页面,我想仅使用纯 html/javascript 在 airtable 中创建一个简单的候补名单。

我在登陆页面上创建了一个简单的表单,它只接受电子邮件。按下“提交”按钮后,我想将此电子邮件发布到我的空中基地。我想它可以通过一个简单的 POST 请求来完成。

有人有这方面的例子吗?

解决方法

您可以这样做,但这样做需要您在面向公众的 HTML 页面中公开您的 Airtable API 密钥,不推荐。任何人都可以在您的页面中找到该密钥,然后使用它。

您可以发出 POST 请求以在库中创建新记录。要成功,您需要:

  1. 您的 API 密钥
  2. 基本 ID
  3. 要在其中创建记录的特定表的表 ID

您可以查看 https://airtable.com/api 了解更多详情。 fetch 代码类似于:

var myHeaders = new Headers();
myHeaders.append("Authorization",`Bearer ${YOUR_API_KEY}`);
myHeaders.append("Content-Type","application/json");

var data = {
  fields: {
    Email: `${email_in_form_submission}`
  }
}
var raw = JSON.stringify(data);

var requestOptions = {
  method: 'POST',headers: myHeaders,body: raw,redirect: 'follow'
};

fetch(`https://api.airtable.com/v0/${YOUR_BASE_ID}/${YOUR_TABLE_ID}`,requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error',error));

Airtable 表单

还建议您查看 Airtable 的原生 Form Views,它允许您创建一个面向公众的表单,人们可以提交该表单并将数据直接输入您的数据库。如果您想在您拥有和控制的页面上插入表单,表单也可以是 embedded as iframes