[ad_1]
您是否希望在訪問者提交表單時阻止您的頁面刷新？默認情況下，單擊表單提交按鈕後會重新載入整個頁面。這就是表格中輸入的數據被傳輸並存儲在伺服器中。
在本文中，我們將向您展示如何在WordPress表單上啟用Ajax提交並防止頁面重新載入。
為什麼在WordPress中啟用Ajax表單提交
如果要在模式彈出窗口中嵌入表單，Ajax表單提交特別有用。如果未啟用AJAX表單提交，整個頁面將需要刷新，從而導致關閉彈出窗口。這樣，用戶可能會錯過讓他們參與的重要確認消息。
啟用AJAX表單提交後，您的用戶可以在同一頁面上提交表單時看到確認消息，而無需重新載入。
要在WordPress網站上啟用ajax表單提交，我們建議您使用 WPForms， WordPress的最佳表單插件。
第1步：創建新表單
要開始創建表單，首先必須安裝 WPForms插件 在你的WordPress網站上。
不確定怎麼樣？沒問題。你可以跳到我們的指南 如何安裝WordPress插件 把這一切都整理好了。
安裝並激活插件後，轉到WordPress儀錶板並導航到WPForms»Add New。現在，您將被重定向到一個頁面，您可以在其中為表單選擇模板。
WPForms提供7種不同的表單模板供您選擇。讓我們為本教程選擇Simple Contact Form選項，然後在表單中添加一個文件上傳欄位。
您現在將在屏幕上看到表單構建器。在屏幕左側，您有「添加欄位」和「欄位選項」選項卡。您可以使用這些選項卡配置聯繫表單。
WPForms使您可以輕鬆地通過拖放操作向表單添加欄位。您還可以通過拖放來更改欄位的位置。如果你想刪除一個欄位，這也很容易。只需將游標懸停在不需要的欄位上，然後點擊將出現在該欄位右上角的刪除圖標。
在「欄位選項」選項卡下，您可以更改欄位的標籤，更改名稱欄位的格式，更改字體大小以及啟用或禁用標籤和子標籤。您還可以選擇啟用條件邏輯選項。
使用表單構建器創建表單後，單擊「保存」按鈕，以使更改保持不變。
現在我們已經創建了一個簡單的聯繫表單，讓我們為它添加文件上傳功能。
要添加文件上傳功能，您只需單擊左側面板中的「文件上載」欄位即可。或者，您可以拖動「文件上載」表單欄位並將其放到表單構建器中的首選位置。
第3步：啟用Ajax表單提交
保存更改後，單擊頁面構建器左側的「設置」選項卡。你會在這裡看到幾個選項。轉到「常規」選項。在此下，您將看到許多欄位。您可以在此處更改表單名稱，添加表單說明，更改按鈕文本等。
如果您向下滾動屏幕，您會看到一些複選框。您可以選中「啟用Ajax表單提交」複選框。單擊屏幕右上角的「保存」按鈕完成此過程。
現在轉到「常規」選項卡下的「通知」選項卡。每次有人提交表單時，此選項都會通知您。因此，在第1個欄位中輸入管理員的電子郵件地址或負責接收電子郵件的人員。您還可以輸入電子郵件主題，發件人姓名，收件人地址以及您自己的郵件。
完成後，請確保保存更改。您還可以設置訪問者在點擊提交按鈕後收到的確認消息。
第4步：使用Ajax提交發布您的表單
最後一步是在您的網站上發布您的Ajax提交表單。為此，請轉到您希望表單顯示的頁面。
您可以從WordPress儀錶板上的Pages»Add New開始。現在為您的頁面添加標題。在頁面的文本編輯器上，單擊「添加表單」選項。屏幕上會彈出一個新窗口。
單擊下拉箭頭並選擇剛剛創建的表單。現在單擊「添加表單」按鈕。您將看到嵌入代碼反映在頁面的文本編輯器中。您可以通過單擊屏幕右側的「預覽」按鈕來檢查表單的外觀。
然後，您可以單擊「發布」按鈕以最終使表單生效。
這很容易，不是嗎？
您現在可能想要跟蹤聯繫表單收到的按鈕點擊次數。為此，請查看我們的指南 跟蹤鏈接和按鈕點擊。
這篇文章 如何在WordPress中提交沒有頁面刷新的表單 首先出現在 IsItWP – WordPress技術查找工具。