1.安装超级留言板插件
插件下载地址:https://pan.baidu.com/s/1JEVnLBLLGZDWT2SRVB8Cqw?pwd=cx6w
这个插件是基于wordpress自带的评论功能实现的表单留言
2.在后台设置-讨论中关闭"评论者必须填入名字和电子邮箱地址"和"用户必须注册并登录才可以发表评论"这两项
4.新建一个页面,页面标题就叫做"在线留言",在页面右侧属性超级留言板选项那里选择"超级留言板表单"
页面建好后查看一下这个页面的id是多少(我这里的id是77,后面会用到这个id)
5.主题模板中添加表单代码
姓名、邮箱、留言是wordpress自带的,字段名分别是author、email、comment。如果你的表单中这三项,直接用wordpress自带的这几个字段名就可以。有其它自定义字段,就在超级留言板设置中添加就可以。
wordpress表单的提交地址是"/wp-comments-post.php",可以使用form表单提交,也可以使用ajax提交。表单中需添加两个隐藏项:"comment_post_ID"和"comment_parent",comment_post_ID就是提交留言的页面id,填上一步新建页面的id就行,comment_parent是留言的父级,填0就可以。
下面这个例子是ajax方式提交的表单:
<div class="liuyanbox">
<h3>在线留言</h3>
<form class="form" id="liuyan" action="javascript:;" enctype="multipart/form-data" method="post">
<div class="form-item">
<label>姓名:</label>
<input type="text" name="author" id="author" required lay-verify="required" autocomplete="off">
</div>
<div class="form-item">
<label>电话:</label>
<input type="text" name="tel" id="tel" required lay-verify="required" autocomplete="off">
</div>
<div class="form-item">
<label>所在地:</label>
<input type="text" name='address' id='address' required lay-verify="required" autocomplete="off">
</div>
<div class="form-item form-text flex_row">
<label>留言:</label>
<textarea name="comment" id='comment' rows="5" ></textarea>
</div>
<input type="hidden" name="comment_post_ID" value="77" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
<div class="send">
<input type="button" onclick="send()" name="submit" value="提交" />
</div>
</form>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
function send(){
$.post('/wp-comments-post.php',$('form').serialize(),function(data){
alert('提交成功');
});
}
</script>
<h3>在线留言</h3>
<form class="form" id="liuyan" action="javascript:;" enctype="multipart/form-data" method="post">
<div class="form-item">
<label>姓名:</label>
<input type="text" name="author" id="author" required lay-verify="required" autocomplete="off">
</div>
<div class="form-item">
<label>电话:</label>
<input type="text" name="tel" id="tel" required lay-verify="required" autocomplete="off">
</div>
<div class="form-item">
<label>所在地:</label>
<input type="text" name='address' id='address' required lay-verify="required" autocomplete="off">
</div>
<div class="form-item form-text flex_row">
<label>留言:</label>
<textarea name="comment" id='comment' rows="5" ></textarea>
</div>
<input type="hidden" name="comment_post_ID" value="77" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
<div class="send">
<input type="button" onclick="send()" name="submit" value="提交" />
</div>
</form>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
function send(){
$.post('/wp-comments-post.php',$('form').serialize(),function(data){
alert('提交成功');
});
}
</script>