在从头开始为 WordPress 构建联系表单时，这是可以做到的。 本文介绍了如何构建自己的联系表单——以及为什么应该这样做的好处。

在本文中，我们将专注于在没有插件的情况下构建一件事：WordPress 联系表。

有很多插件可以满足您在 WordPress 中所希望的一切，但您可能会觉得从头开始构建功能是有益的和安全的。

你可能会问 何必？ 好吧，我们将介绍几个原因。 例如，很多时候人们不想弄乱插件的 UI，或者插件做的比你想要的要多。

本文涵盖：

• 为什么不只使用插件？
• 开始创建自己的联系表
• 构建表单逻辑
  • 响应生成
  • 真人验证
  • 验证

这是一次很棒的学习经历，你知道幕后发生了什么，并且你正在获得另一次的技能。

但还是……

为什么不只使用插件？

如果我们不提及我们免费的 5 星评级 Forminator 插件，我们就会对自己造成伤害。 它是我们创建首选选项（和推荐）的表单，因为它易于使用、令人惊叹的功能（例如电子商务、设计等）以及更多。

所以，在讨论为什么不使用插件之前，请记住我们并不是说不要使用插件。 像 Forminator 这样的插件是一个很好的解决方案。

但是，还有其他可能不是。 就像我们之前暗示的那样，学习创建自己的联系表格可能是一种很棒的学习体验。

如果您想尝试创建自己的插件，以下是插件对简单联系表单不利的四个充分理由：

1. 插件包的方式比你（应该）关心的要多
2. 使用 UI 构建一个简单的联系表单是多余的
3. 了解引擎盖下的内容对您的知识和内心的平静都有好处
4. 默认样式表可以从内部杀死一个人。

甚至可能还有其他原因。 例如，也许您不想要大量功能。 你只是想让事情......简单。

但我需要所有这些功能！

真的吗？ 这不再是 Web 2.0。 复杂的表格会吓到客户。 那里有很多。

您有多少次去填写表格，却被您必须输入的个人数据量吓倒？ 它一直在发生。

用户甚至半途而废，然后被其他事情分心。 现在人们的注意力很短。 因此，为了让您的潜在客户和客户尽可能轻松地与您取得联系，您真的应该将您的联系表格剥离到骨头上。

有啥 绝对必要?

姓名、电子邮件、消息和人工验证。 但我想你已经知道了。

这四点信息就像在博客上发表评论一样简单——你为什么想让联系变得更加困难？ 除非绝对需要，否则我认为我从未构建过包含更多信息的表单。

如果人们想留下他们的电话号码和地址，他们会在消息中这样做。 视觉提示，例如 问他们 在表格上方的简短段落中就足够了！

同样，我们的 Forminator 插件让事情变得简单。 但是，好吧，我们将大胆而大胆地从头开始创建一个表格。 事情是…

当然这是一个痛苦的编码 一切 从头开始？ 正确的？

并不真地。 如果您有耐心，您将在半小时内完成本教程。 它真正包括的是：

1. 自定义模板文件
2. 一些PHP

是的，就是这样。 您可以在一个文件中处理显示表单、人工验证、验证、向管理员发送电子邮件以及感谢读者取得联系。

开始创建自己的联系表

我们将从全新的 WordPress 安装开始。 如果您不确定如何对 Codex 进行自我教育。

要遵循良好的做法，请创建一个仅包含样式表和自定义页面模板的子主题。

在 wp-content/themes 中，添加一个名为“contact-form”的新文件夹。 在其中，创建两个新文件 - style.css 和 page-contact-us.php。

在 style.css 中，粘贴以下内容：

/*
Theme Name:     Contact Form Page Template
Theme URI:      https://wpmudev.com/blog/
Description:    A super simple, self-contained contact form you can drop into your existing theme.
Author:         Harley
Author URI:     https://wpmudev.com/
Template:       twentytwelve
Version:        0.1
*/
@import url("../twentytwelve/style.css");

到目前为止，您应该能够继续并在您的测试站点上激活主题并准备好推出。

下一步是创建一个页面，恰当地命名为“联系我们”。 这个名字很特别。 它与我们之前创建的模板文件直接相关 page-contact-us.php. 这个用于创建自定义页面模板的解决方案不是包罗万象的，只是 WordPress 提供的一种我喜欢的约定。 关于我们的页面.php 将自动用于显示标题为“关于我们”的页面。 这有点方便！

如果你已经创建 page-contact-us.php 并将其留空，访问您新创建的“联系我们”页面将产生一个空白页面。

不过没关系！ 用以下内容快速填充它，它看起来就像一个正常的页面。

<?php get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="entry-content">
<?php the_content(); ?>
<p>FORM CODE GOES HERE</p>
</div><!-- .entry-content -->
</article><!-- #post -->
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

好的。 现在我们已经有了基本页面，是时候放入一个非常简单的表单了。

将 FORM CODE GOES HERE 段落替换为以下内容：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20.error%7B%0A%20%20%20%20padding%3A%205px%209px%3B%0A%20%20%20%20border%3A%201px%20solid%20red%3B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%20%20border-radius%3A%203px%3B%0A%20%20%7D%0A%0A%20%20.success%7B%0A%20%20%20%20padding%3A%205px%209px%3B%0A%20%20%20%20border%3A%201px%20solid%20green%3B%0A%20%20%20%20color%3A%20green%3B%0A%20%20%20%20border-radius%3A%203px%3B%0A%20%20%7D%0A%0A%20%20form%20span%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<div id="respond">
<?php echo $response; ?>
<form action="<?php the_permalink(); ?>" method="post">
<p><label for="name">Name: <span>*</span> <br><input type="text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
<p><label for="message_email">Email: <span>*</span> <br><input type="text" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
<p><label for="message_text">Message: <span>*</span> <br><textarea type="text" name="message_text"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
<p><label for="message_human">Human Verification: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
<input type="hidden" name="submitted" value="1">
<p><input type="submit"></p>
</form>
</div>

请原谅内联样式！ 这纯粹是为了错误/成功消息，并将整个内容放在一个文件中。 随意把它放在你的 style.css 中。

这里发生了很多事情。 首先，我们回显 $respond 变量，稍后我们会看到它。

其余的只是表单标签，但您会注意到它们的值与 $_POST 变量相呼应。 这样在表单提交不正确的情况下，所有数据都会被保留，因此用户不必从头开始输入所有内容。

还有一个偷偷摸摸的“隐藏”表单输入，允许我们检查用户是否发布了任何内容。 不过，我稍后再谈。

我在每个输入旁边添加了一个星号，表示它们是必需的。

如果您保存并刷新，您将拥有一个漂亮的联系表格！

构建表单逻辑

表单提交后的逻辑很简单。 有几个组件需要构建。

1. 响应生成和消息（基于验证）
2. 验证
3. 发送电子邮件

我们将在下面将其全部分解……

响应生成

为了避免混乱的 PHP 代码，我们在表单中放置了 $response 变量。 这很酷，将逻辑与视图分开。 我们如何设置呢？

这真的很简单，我们需要编写一个函数，用我们从验证中获得的反馈填充 $response 变量。 这必须包含解决每个验证要求的消息。

在 get_header() 之前的 page-contact-us.php 顶部，粘贴以下内容。

<?php
//response generation function
$response = "";
//function to generate response
function my_contact_form_generate_response($type, $message){
global $response;
if($type == "success") $response = "<div class="success">{$message}</div>";
else $response = "<div class="error">{$message}</div>";
}
?>

这还没有做很多事情，但如果你有基本的 PHP 知识，你会明白我们 a) 创建一个空的 $response 变量，b) 用传递的 $message 填充它，这取决于它的 $type，这将要么是错误，要么是成功。

现在，当我们构建验证时，我们可以在每种情况下调用 generate_response()（无论是成功还是失败），传递一条消息（即电子邮件地址无效），它会在表单上方吐出！

变量开始

成功的联系表需要 3 组变量。

• 验证消息
• 表单输入变量
• PHP 邮件程序变量

验证过程将使用所有这三个组来验证、发送电子邮件并通知用户发送的消息。

在 my_contact_form_generate_response() 函数下方，写下以下十二个变量：

//response messages
$not_human       = "Human verification incorrect.";
$missing_content = "Please supply all information.";
$email_invalid   = "Email Address Invalid.";
$message_unsent  = "Message was not sent. Try Again.";
$message_sent    = "Thanks! Your message has been sent.";
//user posted variables
$name = $_POST['message_name'];
$email = $_POST['message_email'];
$message = $_POST['message_text'];
$human = $_POST['message_human'];
//php mailer variables
$to = get_option('admin_email');
$subject = "Someone sent a message from ".get_bloginfo('name');
$headers="From: ". $email . "rn" .
'Reply-To: ' . $email . "rn";

每个组都相当直截了当。 响应消息组将我们所有的反馈消息存储在变量中。

用户发布的变量会提取已放入表单的内容，并将它们放置在命名良好的变量中，以省去一遍又一遍地访问 $_POST 变量的麻烦。 $_POST 包含通过表单提交的所有信息。

最后，我们设置了几个 PHP 所需的变量 邮件（） 函数，它告诉它去谁，一个主题行，以及一些指定来自和回复地址的标题。

验证

这是肉的一点。 我们希望以最简洁的方式检查所有可能的问题。 这需要几个嵌套 如果别的 条件语句，但还不足以让你大吃一惊。

按顺序，我们检查

1. 如果用户已提交表单（使用隐藏输入）
2. 如果没有，检查人工验证通过（即用户可以正确地做数学！）
3. 如果通过，请验证电子邮件地址
4. 如果通过，请检查是否存在名称和消息（如果需要）
5. 如果以上所有通过，请发送电子邮件！

所以让我们陷入困境吧！

真人验证

这真的很简单。 我们想测试表单用户是否正确输入了一些数学，以确保他们是人类。 如果你回顾我们的表单域，你会注意到等式是 ? + 3 = 5. 所以很明显，我们要先测试，如果值不是 2，就吐出一个错误。 如果是2，那么我们继续。 在变量组下方，粘贴以下内容。

if(!$human == 0){
if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
else {
//validate email
//validate presence of name and message
//send email
}
}
else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);

在这里，我们首先检查人为验证是否不等于0。如果是，则检查它是否不正确。 如果是，则生成匹配的响应。 最后一行检查隐藏字段是否已提交，如果已提交，则抛出另一个错误。

这测试了两种情况：空内容和人工验证。

如果您尝试在表单为空时提交表单，您应该会收到一条不错的错误消息。

凉爽的！ 如果您在人工验证中输入“2”以外的任何内容，您也会收到错误消息。

验证的下一部分是电子邮件验证。 现在我们知道他们是人类，我们想确保他们提供了一个合法的回复地址，您可以联系他们。

为此，我们使用了一个名为 filter_var() 的 PHP 函数，该函数具有许多验证模型。 显然，我们将使用 FILTER_VALIDATE_EMAIL 模型来验证电子邮件。

将验证过程中的三行注释替换为以下内容。

//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
my_contact_form_generate_response("error", $email_invalid);
else //email is valid
{
//validate presence of name and message
//send email
}

在这里，我们过滤 $email 变量，检查它是否是有效的电子邮件地址。 如果不是，则抛出错误。 否则，继续！

检查名称和消息的存在相对容易。 我们只是使用 PHP 的 empty() 函数，它根据你传递给它的变量是否为空来返回 true 或 false。

//validate presence of name and message
if(empty($name) || empty($message)){
my_contact_form_generate_response("error", $missing_content);
}
else //ready to go!
{
//send email
}

最后，我们的最后一个难题是发送电子邮件。 一旦我们的所有验证都通过了，我们使用 邮件（） PHP 内置的快速发送电子邮件的功能。 我们还必须对成功和失败做出响应。

代替 //发送电子邮件 和：

$sent = wp_mail($to, $subject, strip_tags($message), $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent

不管你信不信，你已经完成了！ 您现在有了一个功能齐全的联系表。

如果您正确填写所有内容，您应该会收到一条成功的消息，说明您的电子邮件已发送。

需要注意的一点是，如今机器人非常擅长通过简单的验证码，所以这是使用插件的好处。 您可以轻松地将 Google reCAPTCHA 实施到您的表单中。 此外，使用 AJAX 更好地进行表单验证和表单提交。

超越规范的联系表格

如您所见，您可以建立自己的联系表格，而无需求助于为您完成的规范。 如果有的话，它可能最终会成为一个有趣的项目来尝试。 如果您喜欢结果 - 保留它！ 如果没有，就像其他所有东西一样，还有插件的替代品。

就是这样。 滚动您自己的联系页面并不难，它可以让事情尽可能快，而且没有任何开销。 当然，根据您的技能，您可以在此基础上进行构建。 这是学习新事物和积累经验的好方法。 更不用说确切地知道引擎盖下发生了什么！

额外学分

如果您想更进一步，请尝试获取表单以将每个条目作为自定义帖子类型帖子插入。 您需要使用 nonces 和 wp_insert_post()。 然后，您甚至可以将其变成一个完全由用户驱动的推荐引擎！

• 形式
• PHP