wordpress怎么实现自定义表单留言功能

1.安装超级留言板插件

插件下载地址:https://pan.baidu.com/s/1JEVnLBLLGZDWT2SRVB8Cqw?pwd=cx6w

这个插件是基于wordpress自带的评论功能实现的表单留言

2.在后台设置-讨论中关闭"评论者必须填入名字和电子邮箱地址"和"用户必须注册并登录才可以发表评论"这两项

3.在超级留言板设置中添加自定义表单的字段

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>

6.用户提交留言后可以在"评论"或者"数据统计和导出"这里查看用户留言

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: