如何以及为什么建立自己的WordPress联系表单

技术教程 2022年3月3日
375 0

谈到从地上的WordPress建立联系人表格时，可以做到这一点.本文介绍了如何构建自己的联系表格-以及为什么应该的好处.

在本文中，我们将专注于在没有插件的情况下建立一件事:WordPress联系表格.

在WordPress中有希望的一切都有大量的插件，但是您可能会感到奖励和安全的建筑功能从头开始.

你可能会问为什么打扰?好，我们将覆盖一些原因.例如，很多时候人们不想用插件的UI弄乱，或者插件会比你想要它更多的方式.

本文封面:

  • 为什么不使用插件?
  • 入门创建自己的联系表单
  • 构建表单逻辑

    • 响应生成
    • 人类验证
    • 验证



这是一个很好的学习体验，你知道引擎盖下发生了什么，你正在获得另一个时间的技能.

但仍然...

为什么不仅使用插件?

如果我们没有提到我们的免费五星级的Frominator插件，我们会自行自然.由于其易用性，惊人的能力(例如电子商务，设计等)，这是我们的表格创建了Go-toction(和推荐)，并且更多.

所以，在进行为什么不使用插件之前，请记住，我们不说不要使用一个.插件像Frominator一样是一个很好的解决方案.

但是，有其他人可能不是.就像我们之前暗示的那样，学习创建自己的联系表格可能是一个令人敬畏的学习体验.

如果您想拍摄下降并创建自己的，这里有四种好原因，为什么插件对于简单的联系人形式可能不好:

  1. 插件包装比你(应该)照顾
  2. 使用UI构建一个简单的联系表单是矫枉过正的
  3. 了解引擎盖下的内容对您的知识有利，以及您的和平
  4. 默认样式表可以从内部杀死一个人.

甚至可能还有其他原因.例如，也许你不想要大量的功能.你只是想保留东西......简单.

但我需要所有这些功能！

真的吗?这不是Web 2.0了.复杂形式可以吓唬客户.那里有很多人.

你有多少次填写表格，只能被你必须投入的个人数据量屈服?它一直在发生.

用户甚至半途而废，然后被别的东西分散了分散注意力.人们这些天的关注跨度很短.因此，为了让您尽可能简单地让您的潜在客户和客户与您联系，您真的应该将您的联系表格剥离到骨骼中.

所以什么是绝对基本的?

姓名，电子邮件，消息和人类验证.但我认为你已经知道了.

这四个小比特的信息都像对博客的评论一样简单-你为什么要更加困难地联系?除非绝对需要，我认为我不认为我有没有提供更多信息的表格.

如果人们想要留下他们的电话号码和地址，他们将在消息中这样做.视觉提示如询问它们在窗体上方的简短段落中足够！

再次，我们的Forminator插件保持简单的东西.但是，好的，我们将是大胆的，大胆，从头开始创造一种形式.事情是...

肯定是从头划分的所有的痛苦?右?

不是真的.如果您患者患者将在半小时内通过本教程进行粉碎.所有它真的包括:

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

是的，就是这样.您可以处理显示表单，人力验证，验证，通过电子邮件发送管理员，并感谢读者在一个文件中取得触摸.

入门创建自己的联系表单

我们将从新的WordPress安装开始.如果你不确定如何教育自己的食谱.

要遵循良好的做法，只需一个样式表和自定义页面模板创建一个子主题.

在WP-Content/主题中，添加一个名为"联系人"的新文件夹.在此内部，创建两个新文件- 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");

现在，您应该能够继续并激活测试站点上的主题，并准备好滚动.

下一步是创建一个页面，恰当地命名为"联系我们".这个名字很特别.它立即涉及我们以前称为页面-copter-us.php 的模板文件.创建自定义页面模板的解决方案不是Catch-All，只是一个常规的WordPress提供，我喜欢. page-about-us.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(); ?>

好吧.现在我们有一个基本页面，现在是时候以一个非常简单的形式删除.

替换表单代码将在此段落段落如下:

<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>

原谅内联风格！这纯粹是错误/成功消息，并将整个东西放在一个文件中.随意把它放在你的风格.

这里有很多事情.首先，我们回显$响应变量，我们将稍后一下.

其余的只是表单标记，但您将注意到它们的值回应了$ _post变量.这是为了使表单被错误地提交，所有数据都保留，因此用户不必从头开始键入所有内容.

还有一个偷偷摸摸的"隐藏"形式输入，允许我们检查用户是否已发布任何内容.我稍后会到达那个.

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

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

构建表单逻辑

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

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

我们将在下面脱落...

响应生成

要保存有杂乱的PHP代码，我们将在表单中放下$响应变量.这很酷，保持逻辑主要与视图分开.我们如何设置这个?

真的很容易，我们需要编写一个函数，其中填充$响应变量与我们从验证中获得的反馈.这必须包含消息以解决每个验证要求.

在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知识，那么您将理解我们)创建一个空的$响应变量，b)使用根据其$类型的$邮件填充它，这将是错误或成功.

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

变量进行

有3组，我们需要成功的联系表格.

  • 验证消息
  • 表单输入变量

  • PHP邮件变量

验证过程将使用这些组中的所有三个验证，发送电子邮件并通知用户发送的消息.

下面的my_contact_form_generate_response()函数，写上以下12个变量:

//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."\r\n".
  'Reply-To: '.$email."\r\n";

每个组相当直接.响应消息组在变量中存储所有反馈消息.

用户发布的变量将已放入表单中的内容，并将其放在恰好命名的变量中，以保存一遍又一遍地访问$ _post变量.$ _post包含通过表单提交的所有信息.

最后，我们设置了PHP的 mail()函数所需的几个变量，告诉它是谁转到的，主题行和一些指定和回复的标题-要解决.

验证

这是肉的肉.我们想以最简洁的方式检查所有可能的问题.这需要几个嵌套如果/else 条件陈述，但不足以吹出您的大脑.

按顺序，我们检查

  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.如果是，请检查它是否不正确.如果是，则生成匹配响应.最后一行检查隐藏的字段是否已提交，如果它具有，则抛出另一个错误.

此测试有两个案例:空内容和人类验证.

如果您尝试在空的时候提交表单，则应获得一个很好的错误消息.

很酷！如果您在人类验证中输入以外的任何内容，您也会收到错误.

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

要非常轻松地执行此操作，我们使用具有许多验证模型的PHP函数.显然，我们将使用filter_validate_email模型来验证电子邮件.

用下面的验证中的三行评论smack bang.

//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
}

此处，如果它是有效的电子邮件地址，我们会过滤$电子邮件变量检查.如果没有，抛出错误.否则，继续！

一行电子邮件验证！

检查是否存在名称和消息相对容易.我们只是使用PHP的空()函数，这取决于您传递给它的变量是否为空.

//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
}

最后，我们的最后一块拼图正在发送电子邮件.一旦我们的验证都通过，我们使用 mail()函数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 Revaptcha融入您的表单中.此外，使用Ajax的方式更好地表单验证和表单提交.

超出规范

的接触形式

您可以看到，您可以在不诉诸您为您完成的规范的情况下建立自己的联系方式.如果有的话，可能最终成为一个有趣的项目来尝试.如果你喜欢结果-保持它！如果没有，就像其他一切，都有插件有替代品.

那是它.滚动自己的联系人页面并不是很难，它可以在没有任何开销的情况下保持尽可能快的东西.根据您的技能，您当然可以构建它.这是学习新事物以及建立您的体验的好方法.更不用说完全了解引擎盖下会发生什么！

额外的信用

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

WordPress(893)插件(302)表单(44)
♥赞5

相关文章

发表评论