使用 Webflow 邏輯在 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 還可以使用「發出 HTTP 請求」區塊或「傳入 Webhook」觸發器將資料從 Airtable 同步到 Webflow CMS。深入研究使用 Logic 發出 HTTP 請求的過程。

建立您的 Airtable API 金鑰

與密碼類似,API 金鑰(有時稱為「存取權杖」)標識向 API 發出 HTTP 請求的網站或應用程式。 Airtable API 金鑰對於將資料傳送到 Airtable 至關重要。

要產生您的 Airtable API 金鑰:

  1. 導航至您的 Airtable 儀表板
  2. 點擊您的個人資料圖示並選擇 帳戶
  3. 捲動到 應用程式介面 部分並點擊 創建代幣
  4. 輕按 建立新令牌
  5. 為您的令牌指定名稱
  6. 從下拉式選單中選擇此 API 金鑰的操作(至少 數據.記錄:寫入 將資料傳送到 Airtable 時需要)
  7. 選擇一個基地並指定您想要傳送資料的 Airtable 基地
  8. 點選 創建代幣,複製你的 API金鑰,並確保您 保持此選項卡打開!

為您的邏輯流程配置身份驗證

  1. 在 Webflow Designer 的新分頁中啟動您的網站
  2. 在設計器畫布上選擇您的表單並訪問 表單設定
  3. 選擇 邏輯 來自 來源 落下
  4. 點選 新增流程
  5. 在中命名您的新流程(例如,「轉發到 Airtable」) 姓名 欄位並可選擇在中新增描述 描述 場地
  6. 拖曳一個 發出 HTTP 請求 區塊到流程編輯器畫布並提供名稱(例如,「在 Airtable 中建立新的潛在客戶記錄」)
  7. API令牌 來自 驗證 落下
  8. 選擇 標頭 來自 添加 落下
  9. 輸入“授權” 標頭 場地
  10. 點選 選擇一個憑證 > 新增憑證
  11. 在中為您的 API 令牌指定一個名稱(例如「Airtable API 令牌」) 姓名 字段並可選擇在 描述 場地
  12. 輸入“承載者 {API 金鑰}「 在裡面 代幣 場,替換 {API 金鑰} 使用從 Airtable 複製的 API 金鑰
  13. 點選 創造 保存新憑證並確保您 保持此選項卡打開!
專業提示: 您也可以選擇透過以下方式將表單連結到新的邏輯流程: 邏輯面板 > 流量 標籤。探索有關 Logic 中表單提交觸發器的更多資訊。
當選擇邏輯作為來源時,「新增流程」或「瀏覽流程」的選項將出現在「表單」設定中。
您可以透過表單設定、表單區塊設定或從 邏輯面板 > 流量 標籤。
在新增至下拉清單中選擇“標頭”,並在標頭輸入欄位中輸入“授權”。
「新憑證」模式視窗顯示 API 憑證的名稱、描述、類型和值欄位。
對於使用不記名驗證的 API(例如 Airtable),您必須在令牌欄位中的 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. 在「內容類型」中輸入 姓名 框中和“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 的最新帖子 (看全部)