如何在 WordPress 網站或博客中創建自定義表單

已發表: 2021-12-27

如何在 WordPress 中創建自定義表單

如果您剛剛建立了您的第一個博客，那麼到現在為止，您就會知道它帶有一個默認的聯繫表格——大多數高級主題都帶有一個。關鍵是，當您的聽眾出於某種原因尋求與您聯繫時，聯繫表格是必不可少的。

更重要的是，通過聯繫表格，您的用戶參與度應該會上升，這就是為什麼在您的博客上使用聯繫表格至關重要的原因。但話又說回來，您也可以使用表單插件，例如聯繫表單 7、快速安全的聯繫表單等，讓您的用戶與您聯繫。

更重要的是，這些聯繫表格應該使您能夠直接與您的受眾聯繫，並使您能夠簡化您的營銷。

視頻教程

但問題在於，大多數默認聯繫表單甚至插件都具有相同的原型格式，這就是為什麼您可能希望選擇更專業的東西，例如在 WordPress 上設置自己的聯繫表單。

如果您恰好精通 php，那麼您應該能夠輕鬆做到這一點，這就是為什麼您必須閱讀本文的其餘部分，以便您可以設置自己的自定義表單供用戶使用，與您聯繫。

1、形式設計：

您可以為此創建一個單獨的頁面模板或在您的 WordPress 頁面中編寫一些 HTML 代碼，並且由於後者更加簡單，因此選擇相同的更有意義。

您可以按照下面列出的步驟在 WordPress 中創建自定義表單。和往常一樣，記得在開始之前備份您的信息。

形式設計

轉到 WordPress 儀表板下的頁面 -> 添加新選項。
給出所需頁面的標題，例如“客戶信息”或“客戶詳細信息”。
現在導航到“HTML”選項卡以編寫 HTML 代碼。
在 WordPress 中創建您想要的自定義表單。
添加一個“POST”方法，命名為“customer_details”
在 onsubmit 屬性中添加一個函數“form_validation”，以便稍後添加一些 JavaScript 驗證並給出操作。
Action 是提交表單時執行的 PHP 文件。
此時，您可能希望在表單中添加一些字段，例如姓名、電子郵件、性別、年齡等，然後關閉表單。

最終代碼應如下所示


你的名字：<br />
您的郵箱：<br />
性別：男女<br />
您的年齡：<br />

2. 驗證：

現在您已經設計了表單，是時候驗證它了。永遠不要“按原樣”信任用戶數據，並且始終在將其輸入數據庫之前對其進行驗證。

只需按照下面列出的代碼進行一些快速驗證，就可以了。寫下這個驗證碼並在最後關閉它。


功能形式驗證（）{
/* 檢查客戶名稱是否為空白提交*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == "" || customer_name == null) {
alert("姓名欄必須填寫。");
返回假；
}/* 檢查客戶電子郵件的格式是否無效 */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“給定的電子郵件地址無效。”);
返回假；
}
}

這將檢查並驗證客戶姓名和電子郵件地址。後添加此代碼。因此，WordPress 中的完整代碼將如下所示：


你的名字：<br />
您的郵箱：<br />
性別：男女<br />
您的年齡：<br />


功能形式驗證（）{
/* 檢查客戶名稱是否為空白提交*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == "" || customer_name == null) {
alert("姓名欄必須填寫。");
返回假；
}
/* 檢查客戶電子郵件的格式是否無效 */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“給定的電子郵件地址無效。”);
返回假；
}
}

現在，您要做的就是發布頁面，這應該可以有效地解決問題。

3.服務器端腳本：

還記得我們提到“customer details.php”的部分嗎？好吧，是時候我們也參加那部分了。
打開記事本或您最喜歡的文本編輯器，記下下面解釋的代碼，並將文件另存為 customer-details.php 在您的桌面上。

首先，聲明一些名為 $customer_name、$customer_email、$customer_sex、$customer_age 的變量，並將這些值分配給 HTML 表單提交的各個字段。

例如 $customer_name = $_POST[“customer_name”] 將通過 POST 方法從 HTML 表單中獲取值並將其分配給變量 $customer_name。

現在，您還需要對其他值執行相同的操作。現在您需要使用 mysqli_connect 將 PHP 文件與數據庫連接起來。如果您不記得數據庫配置，您可以從您的 WordPress 安裝中找到這些設置。

使用您最喜歡的 FTP 客戶端（如 FileZilla）將 wp-config.php 從您的 WordPress 安裝下載到您的桌面。使用您喜歡的文本編輯器（如記事本）打開 wp-config.php，您將找到所需的數據庫設置。

數據庫連接後，使用 mysqli_query 將從表單收集的數據插入 WordPress 數據庫。

此 PHP 代碼中有一個可選步驟。

如果您想在表單提交後向用戶顯示一些消息或希望將用戶重定向到另一個頁面，您可以在代碼中添加標題（“位置：”）。稍後您需要為此創建一個成功頁面。

所以，完整的 customer-details.php 看起來像


// 獲取數據
$customer_name = $_POST[“customer_name”];
$customer_email = $_POST[“customer_email”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// 數據庫連接
$conn = mysqli_connect(“數據庫主機”,”數據庫用戶名”,”數據庫密碼”,”數據庫名稱”);
如果（！$conn）{
die('數據庫連接問題：' . mysql_error());
}
// 數據插入數據庫
$query = "INSERT INTO 'Database Name'.'Table Name' ('customer_name', 'customer_email', 'customer_sex', 'customer_age') VALUES ($customer_name, $customer_email, $customer_sex, $customer_age)”;
mysqli_query($conn, $query);

// 重定向到成功頁面
標題（“位置：”）；

使用您最喜歡的 FTP 客戶端將此 customer-details.php 文件上傳到主題文件夾。

4.成功：

成功頁面是用戶在提交表單及其詳細信息後可以查看的頁面；您可以將此頁面設置為顯示自定義消息，例如“您的詳細信息已成功提交”或類似內容。

關鍵是您可以使用下面發布的代碼來設置您自己的成功頁面並完成自定義消息。

創建一個 WordPress 頁面，給它一個標題，如“成功頁面”，確保將頁面 slug 與“成功頁面”或您在標題中給出的任何內容（“位置”）相匹配。現在寫一條信息，例如“感謝您的合作”或類似的內容，您應該準備好了。

您可以隨時重新加載您的網站以檢查聯繫表格是否按預期工作，並且在幾乎所有情況下，它都應該可以正常工作。但是，如果您遇到一些問題，您可以隨時在線檢查或讓專家設置您的自定義表單。

重要的是，您的聯繫表格不會顯得過於咄咄逼人或侵擾性，這樣它才能幫助提高這些轉化率。

此外，您還可以使用這些自定義表單來收集有關您的客戶的數據和信息，您可以進一步使用這些數據和信息來簡化您的營銷活動。

這是表單，尤其是聯繫表單對於所有博客都必不可少的主要原因之一，更重要的是，您可以使用此處列出的編碼不僅在 WordPress 中創建自定義表單，而且實際上，創建任何類型的聯繫表單不同的參數。

如前所述，在修改核心文件之前進行完整備份總是一個好主意。

一旦您啟動並運行了表單，您應該能夠在將數據輸入數據庫之前檢查相關表單是否驗證了數據，因為它被編程為這樣做。

總體而言，聯繫表格對於博客和網站都非常重要，因為它可以幫助客戶與您聯繫，從長遠來看可以帶來更好的轉化率。因此，請確保您嘗試了上面列出的步驟，並且您的自定義聯繫表單應該可以正常工作。