网站全站隐藏式在线询盘表单（带自动弹出）

网站全站隐藏式在线询盘表单，在网页的右下角，自适应手机端，当网页打开8秒后，会自动弹出询盘表单，如果用户点击之后，就不再弹出。用户可以点击展开与隐藏。

隐藏时：

展开时：

实现代码：

<!--询盘弹窗-->
<style>
.tjdiv input{width:100%;box-sizing: border-box;background:#fff;padding:10px;border:1px solid #ddd;border-radius:0px}
.tjdiv textarea{width:100%;background:#fff;box-sizing: border-box;padding:10px;border:1px solid #ddd;border-radius:0px;min-height:100px;}
#tjbtnn{width:40%;text-align:center;background:#000;color:#fff;border-radius:0px;display:block;cursor:pointer;}
.xss{position:absolute;top:10px;right:10px;font-size:13px;cursor:pointer;}
.content-wrap-live-main {position: fixed;bottom: 0px;right: 0px;z-index: 999999;max-width: 337px;}
.content-wrap-live.form {border-radius: 0px;box-shadow: 0 4px 20px rgba(0,0,0,0.15);overflow: hidden;background: white;}
.content-wrap-live-main{width:337px;position:fixed;right:0;bottom:0;z-index:999999}
.content-wrap-live{width:100%;background:#fff;}
.content-wrap-live h3.titles{position:relative;background: #013e5a;height: 55px;line-height: 55px;color: #fff;margin: 0;padding: 0;font-size: 16px;padding: 0 20px;font-weight: normal;cursor: pointer;}
.content-wrap-live .titles em {font-style: normal;font-weight: 600;}
.content-wrap-live .titles svg {transition: transform 0.4s ease;position:absolute;top:30%;right:20px}
.content-wrap-live .layout6s {max-height: 0;overflow: hidden;transition: max-height 0.8s ease-out;background: white;}
.content-wrap-live .expanded {max-height: 500px;}
.content-wrap-live .rotated {transform: rotate(180deg);}
.content-wrap-live .form-container {padding: 1.5rem;}
.content-wrap-live .form-group {margin-bottom: 1.2rem;}

.content-wrap-live .ff-default .ff-el-form-control{border-radius:0!important;border-left:3px solid #013e5a;}
.content-wrap-live button[type="submit"]{width: 100%;height: 33px;color: #fff;border: none;cursor: pointer;-moz-transition-duration: .3s;-webkit-transition-duration: .3s;-o-transition-duration: .3s;-ms-transition-duration: .3s;transition-duration: .3s;border-radius:0!important;font-size:13px;}
.content-wrap-live button[type="submit"]:hover{background:#000!important;color: #fff!important;}
.css-xff{display:none;}
@media screen and (max-width: 768px) {
.content-wrap-live h3.titles{width:55px;font-size:0;height: 55px;padding:0;line-height: 55px;color: #fff;top: -55px;right: 0;position: absolute;}
.content-wrap form{padding:20px}
.css-i6dzq1{dispay:none;}
.css-xff{display:block;transition: transform 0.4s ease;position:absolute;top:30%;right:20px}
}
</style>

<section class="content-wrap-live-main">
<section class="content-wrap-live form">
<h3 class="titles">
<em>在线咨询</em>
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-xff"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</h3>

<section class="layout6s" id="formSections">
<div class="form-container">
<form action="<?php echo $_SERVER['REQUEST_URI']; $current_user = wp_get_current_user(); ?>" method="post" class="tjdiv">
<?php $module=mt_rand(100000,999999);?>
<input type='hidden' name='module' value='<?php echo $module;?>'/>
<input type='hidden' name='timestamp' value='<?php echo time();?>'/>
<input type='hidden' name='token' value='<?php echo md5($module.'#$@%!^*%*ty'.time());?>'/>
<input type='hidden' value='<?php echo home_url();?>' name='tougao_form' />
<div class="items">
<span>姓名：</span><input type="text" name="tougao_authorname" />
</div>
<div class="items">
<span>电话：</span><input type="text" name="tougao_tell" />
</div>
<div class="items">
<span>邮箱：</span><input type="text" name="tougao_authoremail" />
</div>
<div class="items">
<span>留言：</span><textarea name="tougao_content" ></textarea>
</div>
<div class="items">
<input type="submit" value="提交" id="tjbtnn"/>
</div>
</form>
</div>
</section>
</section>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
const titleElement = document.querySelector('.titles');
const formSection = document.getElementById('formSections');
const svgElement = document.querySelector('.titles svg');
let autoExpanded = false;
let expandTimeout;

// 初始设置：10秒后自动展开
expandTimeout = setTimeout(autoExpand, 6000);

// 标题点击处理
titleElement.addEventListener('click', function() {
// 如果已经自动展开过，则清除自动展开的定时器
if (autoExpanded) {
clearTimeout(expandTimeout);
}

toggleFormSection();
});

function autoExpand() {
autoExpanded = true;
formSection.classList.add('expanded');
svgElement.classList.add('rotated');
}

function toggleFormSection() {
// 如果已经展开，则收起
if (formSection.classList.contains('expanded')) {
formSection.classList.remove('expanded');
svgElement.classList.remove('rotated');
}
// 否则展开
else {
formSection.classList.add('expanded');
svgElement.classList.add('rotated');

// 如果之前没有自动展开过，则标记为已手动展开
if (!autoExpanded) {
autoExpanded = true;
clearTimeout(expandTimeout);
}
}
}
});
</script>