学做网站培训课程介绍

当前位置:

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

客户留言功能是很多网站中都有的一个交互功能,可以让用户在网站前台直接提交留言,网站管理员可在网站后台查看用户留言。有的网站为了简化,直接嵌入一个网站独立客户留言系统,但这不太好,都可以自己用代码写一个网站客户留言功能。(如果你对代码不懂,可以学习一下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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 网站制作流程是什么 视频教程 (1270965 次浏览)
    相信很多朋友第一次接触到网络,接触到建站,会被域名、空间、解析、建站程序等各种问题困扰,甚至都不清楚网站制作流程,也不知该如何下手开始做自己
  • 以下是我们学做网站论坛建站培训课程的所有内容:【只需支付680元的培训费用,就可以学习以下所有课程。】零基础网站制作培训报名地址:https://w
  • 在学做网站论坛学了有一个多月了,论坛里的课程基本上全部看完了,收获很多,前几天一个做摄影的人在网上找到我,要我邦她做一个儿童摄影的网站,我给她报
  • 帮客户做的小额贷款公司网站,其实也是自己的朋友,他知道我在学习做网站,就让我帮他做一个小额贷款公司网站,刚开始还比较担心,怕办砸了,在朋友面
  • 我在本地搭建了个一WP网站,启用Akismet 这个插件的时候,说要注册一个Akismet API Key 我进去以后发现全是英文,我也看不懂,谁有教程呀。然后安装百
  • 对于很多网站来说,缺少不了用户留言页面,对于学做网站新手来说,做一个用户留言页面可以使用Wordpress留言板插件。下面是Wordpress留言板插件contac
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  后版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手