chuan - 昨天 14:29注册会员;
小村庄 - 11月13日注册会员;
wanger - 11月11日注册会员;
axelone - 11月10日注册会员;
你好呀帅哥 - 11月8日注册会员;
加入我们（2288 ）

大气好看的在线联系客服代码（html+js+css）

这是一个在线联系客服功能的页面，展示了在线客服联系方式和留言表单切换功能。用户可以通过填写姓名、联系方式、邮箱账号和备注信息来提交留言。同时，在提交前需要输入正确的验证码进行验证。留言内容可以通过第三方AnPush推送到QQ、邮箱、微信等平台。页面布局简洁清晰，卡片式展示在线留言和联系方式，整体设计美观大方。通过这个功能，用户可以方便地与客服进行沟通和留言交流。
摘要由智能技术生成

做一个在线联系客服功能，页面展示了在线客服联系方式，也同时可以切换在线表单留言，但是留言不会记录，会通过第三方，AnPush可以推送到qq，邮箱，微信里面，需要自信配置key，当然了，可以改为本地php存储入库，看需求吧

如图所示：

微信截图_20240416161936.png

微信图片_20240416162325.png

这是代码html

<section id="ns-contact-us" class="kf_contact">
    <a class="ns-btn ns-btn-primary" href="javascript:void(0);">联系我们</a>
    <ul class="ns-float-details">
        <li>
            <h2>联系我们</h2>
            <div class="ns-close-float-contact-us">
                <span></span>
                <span></span>
            </div>
        </li>
        <li>
            <div class="hz_kf_box nosee bs" id="ly_box">
                <ul class="ly_con">
                    <li class="tellz"><strong class="ts"><i class="txt">在线留言</i></strong></li>
                    <li><input type="text" class="sign__input" name="name" placeholder="姓名" required=""></li>
                    <li><input type="text" class="sign__input" name="tell" placeholder="联系方式" required=""></li>
                    <li><input type="text" class="sign__input" name="mail" placeholder="邮箱账号" required=""></li>
                    <li><textarea name="contents" placeholder="备注信息" rows="2"></textarea></li>
                    <li>
                        <div class="capt">
                            <div id="captcha" class="captcha"></div>
                            <div class="capinput"><input type="text" id="answer" name="capt" placeholder="输入验证码"></div>
                        </div>
                    </li>
                    <li><button class="submit-btn ly_btnn" type="submit" name="mtn" disabled><span>提交</span></button>
                    </li>

                </ul>

            </div>
            <div class="hz_kf_box seek" id="tel_box">

                <ul class="kf_contactList kf1-flex bs s-box1">
                    <li class="hz_kf_l1">
                        <strong class="ts"><i class="txt">售前咨询</i></strong>
                    </li>
                    <li>

                        <p>售前咨询热线</p>
                        <a href="tel:xxx">
                            <p>xxxx</p>
                        </a>
                    </li>
                    <li>
                        <p>售前咨询电话</p>
                        <a href="tel:xxx">
                            <p>xxxx</p>
                        </a>
                    </li>
                    <li class="hz_kf_l2">
                        <div class="ly_btn" id="ly_btn">
                            <span>提交需求 ></span>
                        </div>
                    </li>
                </ul>
                <ul class="kf_contactList kf2-flex bs s-box2">

                    <i class="bg-pri"></i>
                    <div class="wx_pic">
                        <img src="https://www.uicreater.com/home/images/footer/QR.png">
                        <span>微信联系</span>
                    </div>
                    <li class="hz_kf_l1">
                        <strong class="ts"><i class="txt">售后咨询</i></strong>
                    </li>
                    <li>
                        <p>售后服务热线</p>
                        <a href="tel:xxx">
                            <p>xxxx</p>
                        </a>
                    </li>
                    <li>
                        <p>售后服务热线</p>
                        <a href="tel:xxxx">
                            <p>xxxx</p>
                        </a>
                    </li>
                    <li>
                        <p>
                            媒体邮箱
                        </p>
                        <a href="mail:sales@wintoptec.com">
                            <p>sales@wintoptec.com</p>
                        </a>
                    </li>
                </ul>

            </div>
        </li>
        <li>



        </li>

        <li class="tellz">
            <div class="hz_kf_box hz_kf_box2 arr_btn nosee bs">
                返回电话联系
            </div>
            <div class="tell_btn">
                <div class="hz_kf_box hz_kf_box2 bs">
                    <a href="">
                    <span>人工在线咨询</span></a>
                </div>
            </div>
        </li>

        <li>
            <div class="hz_kf_box hz_kf_box3">让科技服务日常，探索美好生活的无限可能</div>
        </li>
    </ul>
</section>

这是jquery部分

<script>
$(document).ready(function() {
  generateCaptcha();
  initializeEventHandlers();
});

function generateCaptcha() {
  var num1 = Math.floor(Math.random() * 10);
  var num2 = Math.floor(Math.random() * 10);
  var result = num1 + num2;
  $('#captcha').text(num1 + ' + ' + num2 + ' = ?');
  $('#captcha').data('result', result);
}

function validateEmail(email) {
  var re = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  return re.test(email);
}

function initializeEventHandlers() {
  $(".ns-btn-primary").on("click", function() {
    $("#ns-contact-us").addClass("active");
  });

  $(".ns-close-float-contact-us").on("click", function() {
    $("#ns-contact-us").removeClass("active");
    $(".arr_btn").addClass("nosee");
    $(".tell_btn").removeClass("nosee");
    $("#ly_box").addClass("nosee");
    $("#tel_box").removeClass("nosee");
  });

  $("#ly_btn").on("click", function() {
    $("#tel_box").addClass("nosee");
    $("#ly_box").removeClass("nosee");
    $(".tell_btn").addClass("nosee");
    $(".arr_btn").removeClass("nosee");
  })

  $(".arr_btn").on("click", function() {
    $(".arr_btn").addClass("nosee");
    $(".tell_btn").removeClass("nosee");
    $("#ly_box").addClass("nosee");
    $("#tel_box").removeClass("nosee");
  })

  $('#answer').on('blur', function() {
    $('#answer').next('.error-msg').remove(); 
    $('#answer').next('.ok-msg').remove(); 
    var answer = parseInt($(this).val(), 10);
    var correctAnswer = parseInt($('#captcha').data('result'), 10);
    if (answer === correctAnswer) {
      $('#captcha').next('.error-msg').remove();
      $('<span class="ok-msg">验证成功</span>').insertAfter('#answer');
      $('.ly_btnn').removeAttr('disabled');
    } else {
      if ($('#captcha').next('.error-msg').length === 0) {
        $('<span class="error-msg">验证失败，请重新输入</span>').insertAfter('#answer');
        $('.ly_btnn').prop('disabled', true);
      }
    }
  });

  $(".submit-btn").click(function() {
    var name = $("input[name='name']").val();
    var tell = $("input[name='tell']").val();
    var mail = $("input[name='mail']").val();
    var content = $("textarea[name='contents']").val();

    if (name.trim() === '' || tell.trim() === '' || content.trim() === '') {
      alert("请填写所有必填字段！");
    } else if (!validateEmail(mail)) {
      alert("请提供一个有效的邮箱地址！");
    } else {  
      var text = '姓名：'+name+', 电话：'+tell+', 邮箱：'+mail+', 备注信息：'+content;   
      var settings = {
        "url": "apikey",
        "method": "POST",
        "timeout": 0,
        "headers": {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        "data": {
          "title": '新留言线索',
          "content": text,
          "channel": xxxx
        }
      };

      $.ajax(settings).done(function(response) {
        console.log(response);
        alert('发布成功');
        $("input[name='name']").val('');
        $("input[name='tell']").val('');
        $("input[name='mail']").val('');
        $("textarea[name='contents']").val('');
      }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log("Request failed: " + textStatus);
      });
    }
  });
}
</script>

剩下是css部分，就可以了

<style>

.bg-pri {
    content: " ";
    position: absolute;
    border-radius: 50%;
    background: #fc625d !important;
    width: 12px;
    height: 12px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 60px;
    top: 16px
}

.capt {
    display: flex;
    flex-wrap: wrap;

}

.capt .captcha {
    line-height: 37px;
    flex: 0 0 auto;
    width: 20%;
}

.capt .capinput {
    flex: 0 0 auto;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
}

#answer {
    max-width: 200px;
}

.ok-msg {
    color: #30bf50;
    font-size: 12px;
    line-height: 37px;
    margin-left: 20px;
}

.error-msg {
    color: red;
    font-size: 12px;
    line-height: 37px;
    margin-left: 20px;
}

.ts {
    position: relative;
}

.ts .txt {
    font-style: normal;
    position: relative;
}

.ts::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 60%;
    background-color: rgba(255, 255, 0, 0.7);
}

.ly_box2 {
    margin-top: 0 !important;
    background-color: #fff;
    border-radius: 8px;
    padding: 0;
    justify-content: center !important;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
}

.bs {
    box-shadow: 0 0 13px 0 rgb(82 63 105 / 5%);
}

.kf_contact a:hover {
    color: #0d6efd;
}

.nosee {
    display: none !important;
}

.ly_con {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 0;
    box-sizing: border-box;
}

.ly_con>li {
    padding: 8px 25px;
    
}

.ly_con input,
.ly_con textarea {
    width: 100%;
    padding: 5px 16px;
    font-size: 13px;
    color: #9199a1;
    border-radius: inherit;
    background: #eff6ff;
    border: 0px;
}
.ly_con textarea{
    height:100px;
}

.ly_btnn {
    width: 82px;
    background-color: #0d6efd;
    color: #fff;
    border: none;
    font-size: 13px;
    border-radius: 4px;
    letter-spacing: 5px;
    display: block;
    padding: 6px 20px;
}

.ly_btnn:disabled {
    pointer-events: none;
    color: #ffffff;
    background-color: #9aa5af;
    border-color: #9aa5af;
    cursor: not-allowed;
}

.arr_btn {
    cursor: pointer;
}

.ly_btn {
    cursor: pointer;
}

#ns-contact-us {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

#ns-contact-us.kf_contact {
    bottom: 130px;
}

#ns-contact-us.kf_contact.active {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

a.ns-btn.ns-btn-primary {
    background: #0d6efd;
    color: white;
}

a.ns-btn {
    
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 6px;
}

.ns-float-details {
    background: url(https://www.uicreater.com/home/images/footer/bg.png) top right no-repeat #fcfcfc;
    background-size: cover;
}

.kf_contact .ns-float-details {
    width: 606px;
}

#ns-contact-us.kf_contact .ns-float-details {
    background-color: #f6f8fa;
}

#ns-contact-us.kf_contact .ns-float-details li h2 {
    font-size: 22px;
    background-image: url(https://www.wintoptec.com/syd/images/asnbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.hz_kf_box {
    width: 90.3%;
    margin: 5% auto 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*align-items: center;*/
}

.hz_kf_box2 {
    margin-top: 2%;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #e60012;
    font-weight: bold;

}
.hz_kf_box2 a{
    color: #e60012;
}

.hz_kf_box3 {
    margin-top: 3%;
    font-size: 12px;
    color: #999999;
    display: block;
    line-height: 1;

}

.wx_pic {
    position: absolute;
    bottom: 123px;
    right: 20px;
    width: 100px;
    height: 30px;
    z-index: 8040;

    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
    cursor: pointer;
    text-align: center;
}

.wx_pic img {
    width: 100%
}

.wx_pic span {
    font-size: 12px;
}

.kf_contactList {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 0;
    box-sizing: border-box;
}

.kf1-flex {
    width: 38%;
}

.kf2-flex {
    width: 60%;
    position: relative;
}

.kf_contactList>li {
    padding: 0 30px 15px;
}

.kf_contactList>li {
    font-size: 18px;
    color: #333;
}

.hz_kf_l1 {
    padding-bottom: 20px;
    font-weight: bold;
}

.hz_kf_l2 {
    margin: 5px 0;
}

.kf_contactList>li span {
    font-size: 14px;
    color: #e60012;
    font-weight: bold;
}

.kf_contactIcon1 {
    width: 22px;
    margin-right: 7px;
    margin-top: -6px;
}

.s-box1 {
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.s-box2 {
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.s-box3 {
    background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 100%);
}

#ns-contact-us.kf_contact .ns-float-details li::after {
    display: none;
}

#ns-contact-us.kf_contact .kf_contactList>li p {
    padding: 0;
    font-size: 14px;

}

#ns-contact-us.kf_contact .kf_contactList>li p:first-child {
    font-size: 14px;
}

#ns-contact-us.kf_contact .ns-float-details li p:last-child {
    padding-bottom: 0;
}

.kf_contactImg1 {
    width: 6px;
}

.kf_contactImg2 {
    width: 18px;
}

.kf_contactIcon6 {
    width: 7px;
}

.hz_kf_l2:hover .kf_contactImg1 {
    transform: translate(3px, 0);
}



@media screen and (max-width:768px) {
    .kf_contact { display: none;}
    #ns-contact-us.kf_contact {
        bottom: 100px;
    }

    #ns-contact-us.kf_contact .ns-btn {
        font-size: 4.3vw;
        padding: 6px 25px;
    }

    .kf_contact .ns-float-details {
        width: 93.3vw;
        margin: 0 auto;
    }

    #ns-contact-us.kf_contact .ns-float-details li h2 {
        font-size: 4.5vw;
    }

    .kf_contactList {
        /*padding:15px 15px 0 15px;*/
    }

    .kf_contactList>li {
        margin-bottom: 3%;
        padding: 5% 15px;
    }

    .kf_contactList>li {
        font-size: 3.7vw;
    }

    .kf_contactIcon1 {
        width: 4.6vw;
    }

    .kf_contactList>li span {
        font-size: 3.5vw;
    }

    .hz_kf_l1 {
        padding-bottom: 7%;
    }

    .hz_kf_l2 {
        /*padding:3% 0 5%;*/
        margin: 0 auto;
    }

    #ns-contact-us.kf_contact .kf_contactList>li p:first-child {
        font-size: 2.9vw;
    }

    #ns-contact-us .ns-float-details li p:last-child {
        font-size: 4.5vw;
        white-space: pre-wrap;
    }

    .hz_kf_box2 {
        font-size: 3.7vw;
    }

    .hz_kf_box3 {
        font-size: 3.5vw;
    }

    .kf_contactList>li:hover {
        background-color: #FFF;
    }

    .hz_kf_box2:hover {
        background-color: #FFF;
    }
}

#ns-contact-us .ns-btn {
    margin: 0
}

#ns-contact-us.active .ns-float-details {
    display: block;
    padding-bottom: 20px
}

#ns-contact-us.active .ns-btn {
    display: none;
}

#ns-contact-us .ns-float-details {
    display: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

#ns-contact-us .ns-float-details li {
    position: relative;
    list-style-type: none;
}

#ns-contact-us .ns-float-details li:last-child:after {
    display: none
}

#ns-contact-us .ns-float-details li::after {
    content: "";
    display: block;
    height: 1px;
    width: calc(100% - 60px);
    margin: 0 auto;
    background: #e5e5e5
}

#ns-contact-us .ns-float-details li h2 {
    color: #fff;
    padding: 20px 30px;
    background: #0d6efd;
    font-size: 24px
}

#ns-contact-us .ns-float-details li a:hover {
    text-decoration: none
}

#ns-contact-us .ns-float-details li h3 {
    padding: 20px 30px;
    font-size: 18px;
    transition: all .5s;
    display: block;
    color: #000;
    position: relative
}

#ns-contact-us .ns-float-details li h3:hover {
    background: #f5f5f5
}

#ns-contact-us .ns-float-details li h3::after {
    content: "";
    
    background-size: cover;
    background-position: -6px 0;
    width: 6px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%)
}

#ns-contact-us .ns-float-details li p {
    padding: 5px 30px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

#ns-contact-us .ns-float-details li p:last-child {
    padding-bottom: 15px
}

#ns-contact-us .ns-float-details li p img {
    margin-right: 10px
}

#ns-contact-us .ns-float-details li .ns-close-float-contact-us span {
    width: 20px;
    height: 3px;
    position: absolute;
    top: 50%;
    right: 30px;
    background: #fff;
    cursor: pointer
}

#ns-contact-us .ns-float-details li .ns-close-float-contact-us span:nth-of-type(1) {
    transform: translateY(-50%) rotate(45deg)
}

#ns-contact-us .ns-float-details li .ns-close-float-contact-us span:nth-of-type(2) {
    transform: translateY(-50%) rotate(-45deg)
}

</style>
文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/2257
在线客服
0 评论
608

发表评论

相关推荐

随机推荐

小灯泡设计

形式在改 初心不变

热门主题 关于我们

热门文章

自媒体博客Spimes主题34w 阅读

Spimes主题专为博客、自媒体、资讯类的网站设计....

vCard主题个人简历主题13w 阅读

一款个人简历主题，可以简单搭建一下，具体也比较简单....

Splity博客双栏主题11w 阅读

仿制主题，Typecho博客主题，昼夜双版设计，可....

Spzac个人资讯下载类主题11w 阅读

用于作品展示、资源下载，行业垂直性网站、个人博客，....

热评文章

自媒体博客Spimes主题418 评论
Splity博客双栏主题187 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题30 评论
vCard主题个人简历主题29 评论
Pure轻简主题28 评论

最新评论

尘集杂货铺和官网1t5-cn

11月11日

[已回复]

希望主题和播放器能支持SQLite数据库，AI能多个讯飞星火

54447454

10月31日

[已回复]

能重复在发一下吗，无法下载了

xdp

10月22日

有没有适合大量图表的数据科学主题。。。虽然echarts也能凑合用。：滑稽：

ywzjk

10月20日

：喜欢：：喜欢：：喜欢：：喜欢：

ab

10月19日

楼主用的什么后台

!