如何建立一個 WordPress AJAX 表單（4個簡單步驟）

多年来，我们帮助数千用户创建和设置网站表单。但是很多用户问我们，能否创建具有 AJAX 功能的表单。AJAX 联系表单可以让用户在不重新加载页面的情况下提交表单，从而提高用户参与度并提供更好的表单提交体验。

在本文中，我们將逐步教你如何輕鬆地建立一個 WordPress AJAX 聯絡表單。

什麼是 AJAX 以及為什麼要在表單中使用它？

AJAX，全稱為 Asynchronous Javascript and XML，是一種 JavaScript 編程技術，允許開發人員在不重新加載頁面的情況下傳輸數據。

它最常用於網絡表單，允許用戶在不重新加載頁面的情況下提交表單數據。這使得表單提交簡單而快速，從而改善整體用戶體驗。

像 Gmail 和 Facebook 這樣的網絡應用程式廣泛使用此技術，以保持用戶的參與度，同時讓所有事情在後台無縫運作。

你可以在你的 WordPress 網站上的表單中使用 AJAX。這將節省用戶不必要的頁面重新加載，並讓他們保持在當前瀏覽的頁面上。

這在運行電子商務網站並希望收集用戶反饋而不分散用戶注意力時非常有用。

你也可以為網站上的其他自定義表單使用相同的 AJAX 功能。例如，自定義用戶登錄表單允許用戶在不附加加載頁面的情況下登錄。

說到這裡，讓我們來看看如何用四個簡單的步驟輕鬆製作一個 WordPress AJAX 聯絡表單。

步驟 1：安裝 WPForms 外掛程式

首先，你需要安裝並啟用 WPForms 外掛程式。有關更多詳細信息，請參見我們的逐步指南，了解如何安裝 WordPress 外掛程式。

WPForms 是市場上最好的 WordPress 表單構建外掛。它允許你輕鬆創建支持 AJAX 的表單。

有關詳細信息，請參見我們完整的 WPForms 回顧。

啟用後，你需要訪問 WPForms » 設置 頁面來輸入許可證密鑰。

輸入許可證密鑰後，你將能夠接收自動更新並安裝附加元件。

你現在已經準備好在 WordPress 中製作漂亮的 AJAX 表單了。

步驟 2：創建你的第一個表單

讓我們來創建你的第一個表單。

只需訪問 WordPress 管理區域中的 WPForms » 新增 頁面。你會被要求為你的表單提供一個標題，並選擇一個模板作為起點。

出於此教程的目的，我們將創建一個聯絡表單。然而，你可以創建你所需的任何其他類型的表單。

WPForms 現在將載入帶有基本字段的表單。你可以簡單地點擊任何表單字段來編輯它。

你也可以從左側欄中點擊新增任何新的表單字段。新的字段將出現在表單的底部，提交按鈕的上方。

你可以輕鬆地拖放表單字段來上下移動它們。

完成編輯表單後，你可以進入下一步。

步驟 3：開啟 AJAX 表單提交功能

WPForms 默認情況下不啟用 AJAX 表單提交。你需要為你的表單手動啟用它。

只需切換到表單構建器中的“設置”選項卡。在常規設置選項卡中，點擊“啟用 AJAX 表單提交”選項旁邊的開關。

現在讓我們設置表單提交後會發生什麼。

首先，切換到設置下的“確認”選項卡。這是通知用戶你已收到他們的表單提交的地方。

WPForms 允許你以不同的方式進行。例如，你可以重定向用戶到一個 URL，顯示他們特定頁面，或簡單地在屏幕上顯示一條信息。

由於我們已經為表單啟用 AJAX 功能，將用戶重定向到另一個頁面將違背創建 AJAX 表單的初衷。

你需要選擇信息選項並編輯確認信息。你可以自由使用編輯器的格式化工具欄，或添加一個或兩個鏈接告訴用戶下一步該去哪裡。

之後，你可以設置如何接收表單提交通知。

切換到表單設置中的通知選項卡並配置通知電子郵件設置。

完成後，你可以保存表單並退出表單構建器。

步驟 4：在 WordPress 中添加啟用了 AJAX 的表單

WPForms 使將表單添加到你的 WordPress 帖子、頁面和側邊欄小工具中變得非常簡單。

只需編輯你想要添加表單的帖子或頁面，然後將 WPForms 區塊插入到內容區域中。

之後，你需要從區塊的設置中選擇你剛創建的表單。

WPForms 會立即在內容編輯器中加載表單的實時預覽。

現在，你可以保存或發布你的內容，然後訪問網站以測試表單的 AJAX 功能。

這是我們演示網站上的 WordPress AJAX 表單示例的快速預覽。

你也可以將表單添加到 WordPress 的側邊欄小工具中。

為此，請前往外觀 » 小工具頁面，並將 WPForms 小工具區塊添加到側邊欄。

選擇你之前創建的表單，然後點擊“更新”按鈕來保存小工具設置。現在，你可以訪問你的網站來查看你的 AJAX 驅動表單的運行情況。

希望這篇文章能幫助你學習如何為網站創建 WordPress AJAX 聯絡表單。你可能還想查看我們的指南，了解如何在 WordPress 中創建聯絡表單彈出窗口，以及我們精選的最佳電子郵件行銷服務來拓展你的業務。

如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。