学做网站培训课程介绍

当前位置:

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

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

发表评论

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

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 帮客户做的小额贷款公司网站,其实也是自己的朋友,他知道我在学习做网站,就让我帮他做一个小额贷款公司网站,刚开始还比较担心,怕办砸了,在朋友面
  • 中秋节帮客户做了一个建材公司网站,本想趁着中秋节放假出去好好玩玩的,可一个客户要求做一个网站,时间紧,任务重。于是就放弃中秋节放假的时间,用
  • 我在本地搭建了个一WP网站,启用Akismet 这个插件的时候,说要注册一个Akismet API Key 我进去以后发现全是英文,我也看不懂,谁有教程呀。然后安装百
  • 学做网站论坛友情链接申请要求:1.网站权重大于1,建站时间达到一年以上,即可申请本论坛友情链接2.和建站方面相关的网站、博客、门户等都
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点