如何構建WordPress AJAX表單(只需4個簡單步驟)


您想在WordPress中建立AJAX聯絡表單嗎?

AJAX聯繫人表單允許用戶提交表單而無需重新加載頁面。 這使您可以增加用戶參與度,同時為用戶提供更好的表單提交體驗。

當您運行電子商務網站並希望收集用戶反饋而不會轉移用戶注意力時,這非常方便。

您還可以對網站上的其他自定義表單使用相同的AJAX功能。 例如,自定義用戶登錄表單將允許用戶登錄而無需額外的頁面加載。

在本文中,我們將向您展示如何通過分步說明輕鬆構建WordPress AJAX聯繫人表單。

在WordPress中創建Ajax聯繫人表單

什麼是Ajax,為什麼要在表單中使用它?

Ajax是異步Java腳本和XML的縮寫,是一種JavaScript編程技術,它使開發人員無需重新加載頁面即可傳輸數據。

它最常用於Web表單,允許用戶提交表單數據而無需重新加載頁面。 這使表單提交變得輕鬆快捷,從而改善了整體用戶體驗。

Gmail和Facebook等Web應用程序廣泛使用此技術來保持用戶的參與度,同時使所有內容在後台無縫運行。

您也可以將Ajax用於WordPress表單。 這將使用戶免於不必要的頁面重新加載,並使他們保持在當前正在查看的頁面上。

話雖如此,讓我們看一下如何通過4個簡單的步驟輕鬆製作WordPress Ajax聯繫人表單。

1.安裝WPForms插件

您需要做的第一件事是安裝並激活WPForms插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

WPForms是市場上最好的WordPress表單生成器插件。 它也使您可以輕鬆地創建Ajax支持的表單。

激活後,您需要訪問 WPForms»設置 頁面以輸入您的許可證密鑰。

WPForms許可證密鑰

輸入許可證密鑰後,您將能夠接收自動更新並安裝附件。

現在,您已經全部準備好在WordPress中製作漂亮的Ajax表單。

2.創建您的第一個表格

讓我們繼續創建您的第一個表單。

只需訪問 WPForms»添加新 WordPress管理區域中的頁面。 系統會要求您提供表單標題,然後選擇一個模板作為起點。

選擇表格模板

為了本教程的緣故,我們將創建一個聯繫表。 但是,您可以創建所需的任何其他類型的表單。

WPForms現在將使用已添加到表單中的基本字段來加載表單。 您只需指向並單擊任何表單字段即可對其進行編輯。

在WPForms中編輯表單字段

您也可以通過單擊左欄中的任何新表單字段來添加它。 新字段將顯示在表單底部的“提交”按鈕上方。

單擊以添加一個新的表單字段

您可以輕鬆地拖放表單字段以在表單中上下移動它們。

完成表格的編輯後,即可繼續進行下一步。

3.打開Ajax表單提交功能

WPForms默認情況下不啟用Ajax表單提交。 您將需要為表單手動啟用它。

只需切換到表單構建器中的“設置”標籤,然後選中“啟用AJAX表單提交”選項旁邊的框即可。

打開Ajax表單功能

選中該複選框將打開此表單的Ajax功能。

現在,讓我們設置提交表單後發生的情況。

首先,在設置下切換到“確認”標籤。 在這裡,您可以通知用戶您已收到其表單提交。

確認設定

WPForms允許您以不同的方式執行此操作。 例如,您可以將用戶重定向到URL,向他們顯示特定頁面或僅在屏幕上顯示消息。

由於我們已經為表單啟用了Ajax功能,因此將用戶重定向到另一個頁面將無法創建Ajax表單。

您需要選擇消息選項並編輯確認消息。 隨時使用編輯器上的格式化工具欄,或添加一個或兩個鏈接來告訴用戶下一步該怎麼做。

之後,您可以設置希望如何收到表單提交通知。

切換到表單設置中的“通知”選項卡,然後配置通知電子郵件設置。

表單通知電子郵件設置

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

4.在WordPress中添加已啟用Ajax的表單

WPForms使將表單添加到WordPress帖子,頁面和側邊欄小部件變得非常容易。

只需在要添加表單的位置編輯帖子或頁面,然後將WPForms塊插入到您的內容區域。

將WPForms塊添加到WordPress帖子或頁面

之後,您需要從塊的設置中選擇剛創建的表單。 WPForms將立即在內容編輯器中加載表單的實時預覽。

選擇你的表格

現在,您可以保存或發佈內容,然後訪問您的網站以測試表單的Ajax功能。

Ajax聯繫人表單預覽

您也可以將表單添加到WordPress的側邊欄小部件中。 為此,請轉到 外觀»小部件 頁並將WPForms小部件添加到側邊欄。

將您的Ajax支持的表單添加到側邊欄小部件

選擇您之前創建的表單,然後單擊“保存”按鈕以存儲小部件設置。 現在,您可以訪問您的網站以查看您使用Ajax支持的表單。

我們希望本文能幫助您學習如何為您的網站創建WordPress Ajax聯繫表單。 您可能還想查看我們的指南,了解如何在WordPress中創建聯繫人表單彈出窗口。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。