如何在 WordPress 表單中使用 Webhook

您想將您的 WordPress 表單與不同的 Web 應用程序和服務集成嗎?

如果您需要一種直接從 WordPress 表單在 Web 應用程序上發送數據的簡單方法,那麼 webhook 是完美的解決方案。使用 webhook 表單,您無需藉助 Zapier 等第三方連接器。

在這篇文章中,我們將向您展示如何在您的 WordPress 表單上使用 webhook,以便您可以輕鬆地將實時數據發送到您喜歡的應用程序和服務。 

但首先,如果您是初學者,我們將介紹什麼是 webhook 以及它們為何重要。請記住,我們今天將使用的方法不需要您具備任何編碼技能。

什麼是 Webhook? 

Webhook 允許兩個 Web 應用程序相互通信。因此,例如,如果有人在您的網站上提交了採購訂單表格,您可以將該數據發送到您的 Slack 頻道,以更新您的產品團隊已下訂單。當您獲得新的潛在客戶或訂閱者時,您也可以這樣做。

從技術上講,webhook 是用戶定義的 HTTP 回調,由源系統中的事件觸發並發送到目標系統。

這意味著當您的網站上發生事件或觸發事件時,會自動向連接的服務發送消息。觸發器可以是博客評論、產品購買用戶註冊和表單提交等任何內容。 

如果您想知道為什麼應該使用 webhook,這裡有一些好處:

  • 自動在兩個服務/應用程序之間傳輸信息
  • 自動化任務並減少管理時間
  • 降低使用 Zapier 和 Hubspot 等連接器服務處理應用程序數據的成本。 

Webhook 對於開發人員和精通技術的 WordPress 用戶來說非常有用。

有了這個,讓我們開始我們的分步指南,了解如何在 WordPress 中創建 webhook 表單。

在 WordPress 中創建 Webhook 表單 [簡單方法]

您可以通過多種方式使用 webhook 將您的 WordPress 表單提交發送到其他 Web 應用程序。 

我們將在本教程中使用WPForms,因為它提供了一個 Webhooks 插件,任何人都可以輕鬆使用,包括初學者。絕對不涉及編碼。

工作表

WPForms是 WordPress 網站的最佳表單構建器插件。您需要知道的是,它提供了大量預製模板和即用型表單欄位,可讓您創建所有類型的 WordPress 表單。這包括產品訂單、註冊、預約、簡單的聯繫表格等。

WPForms 帶有一個拖放表單構建器,使自定義表單變得輕而易舉。它擁有大量可用於連接電子郵件、支付和營銷應用程序的插件和集成。

藉助其Webhooks Addon,您可以輕鬆地將 WordPress 與任何服務或應用程序連接起來。只需單擊幾下即可啟用此功能。

此外,WPForms 允許您使用條件規則根據用戶的表單響應觸發 webhook 操作。因此,只有滿足某個欄位的值,webhook 才會運行。這使您可以更好地控制要發送哪些數據以及發送到哪個應用程序。

您可以連接到大量的應用程序和服務。在本教程中,我們將向您展示如何連接到Slack但請記住,您也可以使用相同的步驟連接到其他應用程序和端點。

第 1 步:創建一個新的 Slack 應用程序

通過將您的 webhook 表單連接到 Slack,您可以自動將消息和信息從您的網站發送到您的 Slack 頻道。當有人提交表單、放棄表單等時,您可以更新您的團隊成員或部門。

現在,為了使用 webhook 將數據從 WordPress 發送到另一個服務,您需要在兩個應用程序之間建立一個橋樑。因此,要連接到 Slack,您需要創建一個 Slack 應用程序(橋接器)。

如果您是新手,請不要擔心,這很容易,我們將逐步引導您完成。首先,您需要打開Slack API 頁面並單擊 Create an App 按鈕。 

創建一個新的鬆弛應用程序

在下一個彈出窗口中,您可以選擇使用 Slack 創建應用程序的方式。有兩種選擇:

  • 從頭開始
  • 來自應用清單。 

在這裡,我們將從頭開始創建一個 Slack 應用程序。這聽起來像是很多工作,但實際上只需要點擊幾下。 

從頭開始創建應用程序

然後,您將看到彈出窗口,您可以在其中添加應用程序的名稱並選擇您的 Slack 工作場所。完成後,單擊創建應用程序。 

命名應用程序和工作區鬆弛

這將打開基本信息頁面。在這裡,您需要單擊 Incoming Webhooks 選項。 

傳入的 webhook

在下一個屏幕中,啟用激活傳入 Webhook 設置。這使您可以從外部服務在 Slack 上發布消息。 

啟用傳入的 webhook

啟用後,您將在頁面上看到您的工作區的 Webhook URL 部分。

現在,您需要創建一個新的 webhook 來從您的 WordPress 表單中獲取信息。因此,單擊 Add New Webhook to Workspace 按鈕。 

添加新的網路鉤子

接下來,您可以看到彈出窗口,您可以在其中選擇一個 Slack 頻道來發布您的表單提交。

選擇 Slack 頻道後,單擊允許。 

選擇一個鬆弛的頻道

現在,您將能夠看到您的 Slack 應用程序的新 Webhook URL。 

複製應用網址

您現在要做的就是複製 Webhook URL。稍後您將需要它幾個步驟。

第 2 步:安裝和激活 WPForms

獲得 webhook URL 後,您可以將其添加到 WordPress 表單中。

要開始使用,請在 WPForms 網站上 註冊一個帳戶。

該插件有免費版本,但您需要高級版本才能訪問 webhook 等高級表單功能。WPForms 提供 100% 無風險退款保證,因此您可以在做出承諾之前試用該服務。 

註冊後,您將在「下載」選項卡中找到插件下載文件和許可證密鑰。 

WPForms 許可證密鑰

現在,前往您的 WordPress 儀錶板並安裝插件。如果您想了解更多詳細信息,可以查看我們關於如何安裝 WordPress 插件的指南。 

在您的站點上安裝並激活 WPForms 後,您需要輸入許可證密鑰才能享受所有高級功能和插件。

驗證 wpforms 許可證

在開始創建表單之前,您需要安裝 Webhooks 插件。 

為此,請轉到 WPForms » 插件選項卡,您會發現大量插件可幫助您擴展 WordPress 表單的功能。在這裡,單擊 Webhooks Addon 的 Install Addon 按鈕。

安裝 webhooks 插件

現在,您已準備好在 WordPress 中創建 webhook 表單。 

第 3 步:創建 Webhook 表單

要創建新表單,請轉到 WPForms » 添加新頁面,您將在其中看到預製模板列表。這些模板根據表單的用途預先填充了您需要的欄位。模板庫包括:

  • 簡單的聯繫表
  • 索取報價單 
  • 捐款表格
  • 帳單/訂單
  • 調查表格 
  • 建議表 

…和更多!對於本教程,我們將選擇建議表單模板,因為我們在上一步中創建了一個用於用戶反饋的 Slack 應用程序。隨意選擇最適合您需要的一種。

您所要做的就是在頁面頂部為您的表單命名。然後根據您的需要選擇任何模板,或者您可以選擇空白模板從頭開始。

建議書模板

選擇模板後,您將在下一個窗口中看到拖放表單構建器。

如果您想添加更多欄位,只需將新欄位從左側菜單拖放到表單預覽中即可。

wpforms拖放

WPForms 提供了許多自定義選項,因此您可以單擊任何欄位進行編輯。它允許您更改欄位名稱、描述和更高級的設置。 

編輯表單域

添加完表單欄位後,單擊「保存」按鈕。

在下一步中,我們將學習如何為此表單設置 webhook 並連接您的 Slack 應用程序。 

第 4 步:為 Slack 設置 Webhook 

要使 webhook 在您的表單上工作,您需要導航到 Settings » Webhooks 選項卡,然後單擊 Enable Webhooks 選項。

啟用 webhook wpforms

將創建一個新的 webhook,您可以對其進行編輯以設置您的 Slack 集成。

首先,您可以更改 webhook 的名稱。這將幫助您以後識別它。 

網路掛鉤設置

現在還記得您在第 1 步中從 Slack 應用程序複製的 Webhook URL 嗎?您需要將其粘貼到請求 URL 選項中。這將使您可以將 WordPress 表單與 Slack 等其他服務連接起來。 

為 slack 設置 webhook

在此之後,您將看到用於設置 webhook 的各種設置。我們將在這裡討論每個人的作用以及添加到這些欄位中的內容。 

  • 請求方法:它允許您選擇要使用連接的服務創建的連接類型。根據您要創建的連接類型,您可以使用多種類型的 HTTP 方法:
    • GET:這將從提交的表單中獲取數據並將詳細信息發送到連接的應用程序。
    • POST:這會將數據發送到輔助服務。我們將使用 HTTP POST 請求,因為我們需要將數據從您的表單發布到您的 Slack 頻道。 
    • PUT:這使您可以在 webhook 運行時更新數據。
    • PATCH:這允許您在 webhook 運行時替換數據。
    • DELETE:這使您可以在此特定 webhook 運行時刪除信息。
  • 請求格式:此選項將向伺服器顯示您發送的內容類型。這有點技術性,但基本上,有兩種不同的請求格式類型可用:
    • JSON:以 application/json 格式格式化您的數據,並將內容類型設置為 charset=utf-8。
    • FORM:以 application/x-www-form-urlencoded 格式格式化您的數據,並將內容類型設置為 charset=utf-8。
  • 秘密:如果您是開發人員並想集成自己的 API 進行身份驗證,那麼您可以使用密鑰。但是對於我們的教程,我們不需要此選項,因此我們將其留空。
  • 請求標頭:當請求發送到應用程序時,它會發送特定的值。當 webhook 運行時,這些欄位將自動生成。我們也將此欄位留空。
  • 請求正文:對於此選項,您需要設置消息類型並選擇一個欄位來發布消息。由於用戶將以文本格式輸入建議,因此我們將 Key 設置為 Text。然後,選擇用戶將在其中輸入消息的欄位。 

完成 webhook 請求的設置後,單擊「保存」按鈕。 

第 5 步:設置表單通知

接下來,您可以為 WordPress 表單設置電子郵件通知。這使您可以在管理員、任何團隊成員和客戶/用戶提交表單後向他們發送自動電子郵件。

要設置這些電子郵件工作流程,請轉到設置»通知選項卡,選中啟用通知選項以查看默認設置。 

在這裡,您可以自定義通知設置並添加收件人電子郵件地址。

webhook 表單通知

WPForms 還允許您向表單用戶發送自動電子郵件通知。要進行設置,請單擊頁面右上角的添加新通知按鈕。

然後,您需要使用顯示智能標籤選項並選擇電子郵件。使用此標籤,WPForms 將自動檢測用戶在表單中輸入的電子郵件地址。

webhook 表單用戶通知

在「電子郵件消息」部分,您可以添加自定義消息並使用 {all_fields} 智能標籤來顯示用戶輸入的所有表單數據。

通知消息

最後不要忘記保存您的設置。 

第 6 步:自定義確認消息

WPForms 還允許您在用戶成功提交表單後在網站前端顯示確認消息。 

在設置»確認選項卡中,您將看到確認設置。默認情況下,確認類型設置為「消息」,但此菜單中有 3 個選項:

  • 消息:添加確認消息,在客戶提交訂單後顯示在前端。 
  • 顯示頁面:將您的用戶重定向到您網站上的任何頁面。 
  • 轉到 URL(重定向):將用戶發送到特定 URL。

確認信息

要了解有關此內容的更多信息,您可以查看我們的指南,了解如何以正確的方式設置表單通知和確認

完成設置後,單擊「保存」按鈕。 

我們還必須在這裡提到,WPForms 可讓您與您喜歡的電子郵件服務集成,例如Constant Contact和 Mailchimp。

您只需在「營銷」選項卡下訪問它,然後按照屏幕上的說明連接您的電子郵件帳戶。在大多數情況下,您需要提供可以通過電子郵件提供商生成的 API 密鑰。

在 wpforms 中添加營銷集成

如果您還想將在線表單連接到支付網關,您可以在此處學習如何操作:如何創建在線訂單

您現在需要做的就是在您的 WordPress 網站上發布您的 webhook 表單。 

第 7 步:在您的網站上發布 Webhook 表單

要開始向外部服務發送表單提交,您需要先發布 webhook 表單。使用 WPForms 自定義塊,您可以將表單添加到任何頁面或在 WordPress 網站上發布。 

對於本教程,我們會將表單添加到我們網站的新頁面。因此,導航到 WP 管理面板上的頁面 » 添加新選項卡。在塊編輯器屏幕中,添加一個新塊並搜索「WPForms」。

搜索 wpforms 塊

當您將 WPForms 塊添加到您的頁面時,您會看到一個下拉菜單,讓您可以選擇剛剛創建的 webhook 表單。

選擇 webhook 表單

然後,您可以在您的網站上發布您的頁面。 

發布 webhook 表單

如果您使用的是 WordPress 經典編輯器,則可以使用編輯器上的「添加表單」按鈕添加表單。

添加表單經典編輯器

您甚至可以在頁腳或側邊欄等小部件就緒區域插入 webhook 表單。為此,請轉到外觀»小部件選項卡,然後將 WPForms 小部件拖放到右側的側邊欄或頁腳菜單中。

然後,您可以從下拉菜單中選擇您創建的表單並保存您的更改。

將 wpforms 添加到側邊欄

現在,您的 webhook 表單已發布在您的網站上。當用戶填寫並提交表單時,數據將通過您的 Slack 應用程序直接發送到您的 Slack 頻道。 

像這樣,您可以使用 WPForms 通過 webhook URL 連接到不同的應用程序。您可以完全控制要獲取並發送到其他應用程序的數據。

就這樣!我們希望這篇文章能幫助您了解如何在 WordPress 表單上使用 Webhooks。使用WPForms,您可以創建 webhook 表單並輕鬆連接第三方服務。

您還可以使用它來創建其他專業的 WordPress 表格,例如訂單表格、預訂表格、註冊表單等。

對於接下來的步驟,您可以查看以下資源:

  • 如何向 WordPress 表單添加「保存並稍後繼續」選項
  • 如何減少表單放棄和促進轉換
  • 適用於 WordPress 的最佳電子郵件捕獲工具和表單構建器

這些帖子將幫助您在 WordPress 表單上添加保存和稍後恢復功能,並降低表單放棄率。最後一個將幫助您擴大電子郵件營銷列表。

相關文章