零基础建站培训教程介绍

当前位置:

如何制作网站客户留言功能

客户留言功能是很多网站中都有的一个交互功能,可以让用户在网站前台直接提交留言,网站管理员可在网站后台查看用户留言。有的网站为了简化,直接嵌入一个网站独立客户留言系统,但这不太好,完全可以自己用代码写一个网站客户留言功能。(如果你对代码不懂,可以学习一下HTML入门教程)那么在自己做网站时,怎么制作网站客户留言功能呢?

网站客户留言功能

下面学做网站论坛就以wordpress程序为例,介绍一下网站客户留言功能制作方法。

方法/步骤

第一步:将Wordpress顶部模板header.php上面添加以下的网站信息提交验证代码:


<?php
if( isset($_POST['tougao_form']) && $_POST['tougao_form'] == 'send') {
global $wpdb;
$current_url = '/'; // 注意修改此处的链接地址
$last_post = $wpdb->get_var("SELECT 'post_date' FROM '$wpdb->posts' ORDER BY 'post_date' DESC LIMIT 1");// 表单变量初始化
$name = isset( $_POST['tougao_authorname'] ) ? trim(htmlspecialchars($_POST['tougao_authorname'], ENT_QUOTES)) : '';
$tellhm = isset( $_POST['tougao_authortell'] ) ? trim(htmlspecialchars($_POST['tougao_authortell'], ENT_QUOTES)) : '';
$category = 23;
$content = isset( $_POST['tougao_content'] ) ? trim(htmlspecialchars($_POST['tougao_content'], ENT_QUOTES)) : '';// 表单项数据验证
if ( empty($name) ) {
wp_die('姓名必须填写!<a href="'.$current_url.'">返回</a>');
}

if ( empty($tellhm) ) {
wp_die('电话必须填写!<a href="'.$current_url.'">返回</a>');
}

if ( empty($content) ) {
wp_die('内容必须填写!<a href="'.$current_url.'">返回</a>');
}

$title =$name.'电话: '.$tellhm;
$post_content = '<p>内容:'.$content.'</p>';

$tougao = array(
'post_title' => $title,
'post_content' => $post_content,
'post_category' => array($category)
);

// 将文章插入数据库
$status = wp_insert_post( $tougao );

if ($status != 0) {
wp_die('提示成功!!<a href="'.$current_url.'">返回</a>', '提示成功!');
}
else {
wp_die('提示失败!<a href="'.$current_url.'">返回</a>');
}
}?>

第二步:在需要显示用户留言框的区域,使用以下的代码来制作如上图的用户留言框;


<div class="index_kj index_box6">
            <img src="<?php echo get_template_directory_uri(); ?>/images/index_liuyan.jpg">
            <div class="index_liuyan">
               <div class="hd">
                   <h2>Online Message<br>在线留言</h2>
                   
                </div>
               <div class="bd">
   
                <form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; $current_user = wp_get_current_user(); ?>" id="messageForm">
                   <div class="ipbox">            
                   
                   
                    <label>姓名:</label><input type="text" name="tougao_authorname" class="iptext UserName" required>
                    <label>电话:</label><input type="text" name="tougao_authortell" class="iptext" required>
                   
                    </div>
                   <div class="ipbox"><label>内容:</label><br>
                   
                    <textarea name="tougao_content" cols="20" rows="2" class="textarea" id="GuestBook_Content"></textarea></div>
                   
                    <div class="ipbox" style="text-align:right">
                    <input type="hidden" value="send" name="tougao_form" />
                    <input name="submit" type="submit" class="botton" value="提交">
                    <input name="reset" type="reset" class="botton" value="清空">
                    </div>
                    </form>
                </div>
                <div class="fd">谢谢您对本公司的关注,您可在此给我们留言,我们会尽快在此答复您,请不要忘记回来查看回复哦!</div>
            </div>
        </div>

第三步:在CSS样式文件里添加以下的CSS样式代码,用于控制留言框的样式。


.index_liuyan { width:1060px; height:420px;background-color: rgba(232,233,235,0.9); position:absolute; top:53%; left:50%; margin:-200px 0 0 -530px; z-index:100}
.index_liuyan .hd { max-width:680px; margin:40px auto 20px; font-size:24px; color:#000; text-transform:uppercase; line-height:30px; }
.index_liuyan .bd { max-width:680px; margin:0 auto; }
.index_liuyan .fd { max-width:680px; margin:30px auto; }

.ipbox{ width:100%;color:#333;font-size:16px; margin-bottom:15px; line-height:35px;box-sizing: border-box}
.iptext { border:0; width:250px; height:25px; line-height:25px; padding:3px; background-color:transparent; border:1px solid #4f4f50; border-radius:3px;}

.textarea { width:100%; height:60px;background-color:transparent;border:1px solid #4f4f50; border-radius:3px;}
.botton { padding:0px 35px; height:32px; line-height:30px; text-align:center;border:0;color:#fff; background-color:#19793a; cursor:pointer; font-size:14px}
.UserName { margin-right:30px;}

通过以上的代码就可以制作出一个前台留言框功能,用户提交的留言将显示在网站后台。

如果你不想自己写代码制作用户留言板功能,也可以使用WordPress留言板插件contact-form-7

相关教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程