如果您刚刚建立了您的第一个博客,那么到现在为止,您会知道它带有一个默认的联系表单——大多数高级主题都带有一个。 关键是当您的听众出于某种原因寻求与您联系时,联系表格至关重要。
更重要的是,通过联系表格,您的用户参与度应该会上升,这就是为什么在博客上使用联系表格至关重要。 但话又说回来,您也可以使用表单插件,例如联系表单 7、快速安全的联系表单等,让您的用户与您联系。
更重要的是,这些联系表应该使您能够直接与您的受众建立联系,并使您能够简化您的营销。
视频教程
但问题是,大多数默认联系表格甚至插件都带有相同的构造型格式,这就是为什么您可能想要选择更专业的东西,比如在 WordPress 上设置自己的联系表格。
如果您碰巧在 php 方面非常熟练,那么您应该能够轻松做到这一点,这就是为什么您必须阅读本文的其余部分,以便您可以设置自己的自定义表单供用户使用,与您联系。
1.形式设计:
您可以为此创建一个单独的页面模板或在您的 WordPress 页面中编写一些 HTML 代码,由于后者无限简单,因此选择相同更有意义。
您可以按照下面列出的步骤在 WordPress 中创建自定义表单。 和往常一样,请记住在开始之前备份您的信息。
- 转到 WordPress 仪表板下给出的页面 -> 添加新选项。
- 提供所需页面的标题,例如“客户信息”或“客户详细信息”。
- 现在导航到“HTML”选项卡以编写 HTML 代码。
- 在 WordPress 中创建您想要的自定义表单。
- 添加一个“POST”方法,给它一个名字“customer_details”
- 在 onsubmit 属性中添加一个函数“form_validation”,以便稍后添加一些 JavaScript 验证并给出操作。
- Action 是提交表单时将执行的 PHP 文件。
- 此时,您可能希望在表单中添加一些字段,如姓名、电子邮件、性别、年龄等并关闭表单。
最终的代码应该是这样的
Your Name: <br />
Your Email: <br />
Sex: Male Female<br />
Your Age: <br />
2. 验证:
现在您已经设计了表单,是时候对其进行验证了。 永远不要相信“原样”的用户数据,并且始终在将其输入数据库之前对其进行验证。
只需按照下面列出的代码进行一些快速验证,就可以解决问题。 写下此验证代码并在最后关闭它。
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}/* Check the Customer Email for invalid format */
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(“Given email address is not valid.”);
return false;
}
}
这将检查并验证客户姓名和电子邮件地址。 在 之后添加此代码。 因此,WordPress 中的完整代码将如下所示 -
Your Name: <br />
Your Email: <br />
Sex: Male Female<br />
Your Age: <br />
function form_validation() {
/* Check the Customer Name for blank submission*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert(“Name field must be filled.”);
return false;
}
/* Check the Customer Email for invalid format */
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(“Given email address is not valid.”);
return false;
}
}
现在,您要做的就是发布页面,这应该可以有效地解决问题。
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 看起来像
// Get data
$customer_name = $_POST[“customer_name”];
$customer_email = $_POST[“customer_email”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// Database connection
$conn = mysqli_connect(“Database Host”,”Database Username”,”Database Password”,”Database Name”);
if(!$conn) {
die(‘Problem in database connection: ‘ . mysql_error());
}
// Data insertion into database
$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);
// Redirection to the success page
header(“Location: “);
使用您最喜欢的 FTP 客户端将此 customer-details.php 文件上传到主题文件夹。
4.成功:
成功页面是用户在提交包含其详细信息的表单后可以查看的页面; 您可以将此页面设置为显示自定义消息,例如“您的详细信息已成功提交”或类似内容。
关键是您可以使用下面发布的代码来设置您自己的成功页面,并带有自定义消息。
创建一个 WordPress 页面,给它一个像“成功页面”这样的标题,确保将页面标签与“成功页面”或您在标题(“位置”)中给出的任何内容相匹配。 现在写一条消息,例如“感谢您的合作”或类似的内容,您应该准备好了。
您可以随时重新加载您的网站以检查联系表单是否按预期工作,并且在几乎所有情况下,它都应该可以正常工作。 但是,如果您遇到一些问题,您可以随时在线查看或请专家来设置您的自定义表单。
重要的是,您的联系表格不要显得过于激进或侵入性,以便它有助于提高这些转化率。
此外,您还可以使用这些自定义表单来收集有关客户的数据和信息,您可以进一步使用这些数据和信息来简化您的营销活动。
这是表单,尤其是联系表单对所有博客都必不可少的主要原因之一,更重要的是,您不仅可以使用此处列出的编码在 WordPress 中创建自定义表单,而且实际上还可以使用以下方式创建任何类型的联系表单不同的参数。
如前所述,在修改核心文件之前进行完整备份始终是个好主意。
一旦您启动并运行表单,您应该能够在将数据输入数据库之前检查相关表单是否按照编程的方式验证数据。
总的来说,联系表格对于博客和网站都非常重要,因为它可以帮助客户与您联系,并且从长远来看可以提高转化率。 因此,请确保您尝试了上面列出的步骤,并且您的自定义联系表单应该可以正常工作。