在Wordpress博客中添加能发送邮件的留言板功能

在wordpress中是没有留言板功能的，游客只能在文章中进行评论，想要留言需要安装留言板的插件，但我看了几个感觉不好用，不如自己写一个，还能发送邮件通知。如果别人也能用的话，就更好了，所以我写了这篇文章，有需要的朋友可以直接使用我写的这个小功能，非常简单，但很实用。

安装过程

首先在文章末尾有一段HTML代码，在wordpress后台打开外观功能里的自定义选项，
然后在侧边栏菜单，或者想要放置留言板的地方。添加一个HTML自定义框，标题写留言板或其他，内容里将代码复制进去。
在代码中有一行注释，注释下面有个input标签，将里面的value修改为你要接收邮件的邮箱号。
这样应该看到效果了，点击保存退出即可

注意事项：不要随意更改代码内容

安装完成后就可以使用了，下面是安装截图

这是效果图

这是手机适应图

留言成功的邮件

功能说明：

1. 博客里放置的只是前台显示页面，并不会收集你博客的信息，

2. 点击提交留言时，页面会提交到我开放的一个邮件发送接口中，然后将邮件发送给你。

3. 由于是使用我自己的服务器发送邮件，如果有人恶意使用这个功能，会造成服务器的瘫痪，所以每天限量200条，

4. 等以后我想出什么更好的鉴权方式，再免费提供给大家使用。

前台代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="http://cos.rain1024.com/blog/static/layui/css/layui.css">
    <script type="text/javascript" src="http://cos.rain1024.com/blog/static/js/jquery.min.js"></script>
</head>
<body>
<h2 align="center" id="state" style=""></h2>
<div align="left" style="margin-left:-65px;" >
    <form class="layui-form" action="">
        <!--你的邮箱地址,你的邮箱地址,你的邮箱地址,你的邮箱地址,你的邮箱地址,你的邮箱地址,你的邮箱地址,你的邮箱地址,你的邮箱地址-->
        <input type="hidden" value="你的邮箱地址" id="my_email" name="my_email">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" id="email" required  lay-verify="required" placeholder="请输入你的邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">留言</label>
            <div class="layui-input-block">
                <textarea name="message" id="message"  placeholder="请输入你的留言内容" class="layui-textarea"></textarea>

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="submit_form()" lay-filter="formDemo">提交留言</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>

    //Demo
  function submit_form(){
      var my_email = document.getElementById('my_email').value;
      var email = document.getElementById('email').value;
      var message = document.getElementById('message').value;
      if (my_email==''email==''message==''){
          document.getElementById('state').innerHTML = '请重新输入';
      }else{
        document.getElementById('state').innerHTML = ''; 
        $.getJSON("http://function.rain1024.com/index.php?c=email&a=public_sendemail&my_email="+my_email+"&email="+email+"&message="+message, function(data){
//              document.getElementById('state').innerHTML = data;
//              alert(data.state);
          });
      }
  }
</script>
</body>
</html>