如何在 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 中创建自定义表单，而且实际上，创建任何类型的联系表单不同的参数。

如前所述，在修改核心文件之前进行完整备份总是一个好主意。

一旦您启动并运行了表单，您应该能够在将数据输入数据库之前检查相关表单是否验证了数据，因为它被编程为这样做。

总体而言，联系表格对于博客和网站都非常重要，因为它可以帮助客户与您联系，从长远来看可以带来更好的转化率。因此，请确保您尝试了上面列出的步骤，并且您的自定义联系表单应该可以正常工作。