1. 小蓝资源网首页
  2. 网站源码

用户体验调研问卷 HTML 单页源码（多题型表单）

小蓝IT • • 网站源码 • 阅读 9

米色纸感风格的在线问卷模板，含单选、多选、10 分量表、滑块与文本域五种题型。

本源码是一套完整的在线调研问卷单页模板，采用米黄底色配赭石橙点缀的纸质感设计，比常见的蓝白表单更柔和，能有效降低填写者的抵触心理。页面顶部固定实时进度条，随着题目填写自动推进，给用户明确的完成预期。

模板内置五种常见题型：单选题（选中后整块高亮）、多选题、1–10 分 NPS 量表（方块按钮式评分）、可拖拽滑块（数值联动文字描述）以及带字数统计的多行文本域，另附联系方式输入组。所有交互均为原生 HTML + 少量 JavaScript 实现，无任何第三方依赖；选中态使用 CSS :has() 选择器完成，代码非常简洁。

适合产品团队做用户满意度调研、运营做活动反馈收集、HR 做内部匿名问卷、学生做课题问卷等场景。替换题干与选项后，接入自己的表单提交接口（或金数据、腾讯问卷等服务）即可正式使用。

用户体验调研问卷 HTML 单页源码（多题型表单）

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户体验调研问卷 · 2026</title>
<style>
:root{
  --bg:#faf7f2;
  --card:#ffffff;
  --line:#ece5da;
  --pri:#c4622d;
  --pri-d:#a24d1f;
  --pri-l:#fbeee5;
  --text:#2a2118;
  --muted:#8a7d6d;
  --ok:#2f9e6e;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.8;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}

/* 进度条 */
.pbar{position:fixed;top:0;left:0;right:0;height:4px;background:var(--line);z-index:50}
.pbar i{display:block;height:100%;width:38%;background:linear-gradient(90deg,var(--pri),#e08b4f);transition:width .4s}

/* 头部 */
header{padding:46px 0 32px;text-align:center}
.brandline{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:20px}
.brandline b{
  width:26px;height:26px;border-radius:8px;background:var(--pri);color:#fff;
  display:grid;place-items:center;font-size:13px;
}
header h1{font-size:clamp(25px,4.4vw,35px);font-weight:900;letter-spacing:-.01em;margin-bottom:12px}
header p{color:var(--muted);font-size:14.5px;max-width:500px;margin:0 auto}
.meta{
  display:inline-flex;gap:20px;margin-top:22px;padding:11px 24px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;justify-content:center;
}
.meta b{color:var(--text);font-weight:700}

/* 表单卡片 */
form{padding-bottom:60px}
.q{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 24px;margin-bottom:16px;transition:.28s;
}
.q:hover{box-shadow:0 12px 30px rgba(42,33,24,.07)}
.qh{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.qn{
  width:26px;height:26px;border-radius:8px;background:var(--pri-l);color:var(--pri-d);flex-shrink:0;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;margin-top:3px;
}
.qt{font-size:16.5px;font-weight:700;line-height:1.6}
.req{color:#d0453f;margin-left:4px}
.qs{font-size:13px;color:var(--muted);font-weight:400;margin-top:3px}

/* 单选 / 多选 */
.opts{display:grid;gap:9px;padding-left:38px}
.opt{
  display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:11px;
  border:1.5px solid var(--line);cursor:pointer;font-size:14.5px;transition:.2s;background:#fff;
}
.opt:hover{border-color:#dcc9b3;background:#fffdfa}
.opt input{accent-color:var(--pri);width:17px;height:17px;cursor:pointer;flex-shrink:0}
.opt input:checked+span{font-weight:700;color:var(--pri-d)}
.opt:has(input:checked){border-color:var(--pri);background:var(--pri-l)}

/* 评分 */
.rate{display:flex;gap:8px;padding-left:38px;flex-wrap:wrap}
.rate label{cursor:pointer}
.rate input{position:absolute;opacity:0;width:0;height:0}
.rate span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  border:1.5px solid var(--line);font-weight:800;font-size:15px;transition:.2s;background:#fff;
}
.rate label:hover span{border-color:var(--pri);color:var(--pri)}
.rate input:checked+span{background:var(--pri);color:#fff;border-color:var(--pri);transform:scale(1.06)}
.rate-hint{display:flex;justify-content:space-between;padding-left:38px;margin-top:9px;font-size:12.5px;color:var(--muted)}

/* 滑块 */
.slider{padding-left:38px}
.slider input{
  width:100%;height:6px;border-radius:99px;appearance:none;background:var(--line);outline:none;cursor:pointer;
}
.slider input::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;background:var(--pri);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(196,98,45,.4);cursor:pointer;
}
.sval{text-align:center;margin-top:12px;font-size:15px;font-weight:800;color:var(--pri-d)}

/* 文本域 */
.ta{padding-left:38px}
.ta textarea{
  width:100%;min-height:110px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);
  font-family:inherit;font-size:14.5px;resize:vertical;outline:none;color:var(--text);background:#fff;line-height:1.75;
}
.ta textarea:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.cnt{text-align:right;font-size:12.5px;color:var(--muted);margin-top:7px}

/* 输入组 */
.fields{padding-left:38px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields input{
  padding:13px 15px;border-radius:11px;border:1.5px solid var(--line);font-size:14.5px;
  font-family:inherit;outline:none;color:var(--text);background:#fff;
}
.fields input:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.fields input::placeholder{color:#b3a795}

/* 提交 */
.submit{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 26px;text-align:center;margin-top:8px;
}
.agree{display:flex;align-items:center;gap:9px;justify-content:center;font-size:13.5px;color:var(--muted);margin-bottom:20px}
.agree input{accent-color:var(--pri);width:16px;height:16px}
.btn{
  width:100%;max-width:320px;padding:15px 30px;border-radius:12px;border:none;cursor:pointer;
  background:var(--pri);color:#fff;font-size:16px;font-weight:800;font-family:inherit;transition:.25s;
}
.btn:hover{background:var(--pri-d);transform:translateY(-2px);box-shadow:0 14px 30px rgba(196,98,45,.3)}
.tip{margin-top:14px;font-size:12.5px;color:var(--muted)}

footer{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--muted);font-size:13px}

@media(max-width:560px){
  .opts,.rate,.ta,.fields,.slider,.rate-hint{padding-left:0}
  .fields{grid-template-columns:1fr}
  .q{padding:20px 18px}
}
</style>
</head>
<body>

<div class="pbar"><i id="pb"></i></div>

<div class="wrap">
  <header>
    <div class="brandline"><b>问</b>拾光调研中心</div>
    <h1>2026 年度用户体验调研</h1>
    <p>您的每一条反馈都会直接影响我们下一个版本的设计方向。感谢您抽出宝贵时间。</p>
    <div class="meta"><span>共 <b>7</b> 道题</span><span>约需 <b>3</b> 分钟</span><span>完整匿名</span></div>
  </header>

  <form onsubmit="event.preventDefault();var b=this.querySelector('.btn');b.textContent='提交成功，感谢您 ✓';b.style.background='#2f9e6e';document.getElementById('pb').style.width='100%';">

    <div class="q">
      <div class="qh"><div class="qn">1</div><div><div class="qt">您使用我们产品多久了？<span class="req">*</span></div></div></div>
      <div class="opts">
        <label class="opt"><input type="radio" name="q1" required><span>不到 1 个月，还在体验阶段</span></label>
        <label class="opt"><input type="radio" name="q1"><span>1–6 个月</span></label>
        <label class="opt"><input type="radio" name="q1"><span>6 个月 – 2 年</span></label>
        <label class="opt"><input type="radio" name="q1"><span>2 年以上，算是老用户了</span></label>
      </div>
    </div>

    <div class="q">
      <div class="qh"><div class="qn">2</div><div><div class="qt">您最常使用哪些功能？<span class="req">*</span><div class="qs">可多选，最多选 3 项</div></div></div></div>
      <div class="opts">
        <label class="opt"><input type="checkbox" name="q2"><span>数据看板与报表导出</span></label>
        <label class="opt"><input type="checkbox" name="q2"><span>团队协作与任务分配</span></label>
        <label class="opt"><input type="checkbox" name="q2"><span>自动化流程配置</span></label>
        <label class="opt"><input type="checkbox" name="q2"><span>API 与第三方集成</span></label>
        <label class="opt"><input type="checkbox" name="q2"><span>移动端随时查看</span></label>
      </div>
    </div>

    <div class="q">
      <div class="qh"><div class="qn">3</div><div><div class="qt">总体而言，您对产品的满意度是？<span class="req">*</span></div></div></div>
      <div class="rate">
        <label><input type="radio" name="q3" required><span>1</span></label>
        <label><input type="radio" name="q3"><span>2</span></label>
        <label><input type="radio" name="q3"><span>3</span></label>
        <label><input type="radio" name="q3"><span>4</span></label>
        <label><input type="radio" name="q3"><span>5</span></label>
        <label><input type="radio" name="q3"><span>6</span></label>
        <label><input type="radio" name="q3"><span>7</span></label>
        <label><input type="radio" name="q3"><span>8</span></label>
        <label><input type="radio" name="q3"><span>9</span></label>
        <label><input type="radio" name="q3"><span>10</span></label>
      </div>
      <div class="rate-hint"><span>非常不满意</span><span>非常满意</span></div>
    </div>

    <div class="q">
      <div class="qh"><div class="qn">4</div><div><div class="qt">您愿意向朋友或同事推荐我们吗？</div></div></div>
      <div class="slider">
        <input type="range" min="0" max="10" value="8" oninput="document.getElementById('sv').textContent=this.value+' 分 · '+(this.value>=9?'一定会推荐':this.value>=7?'比较可能推荐':'暂时不太会')">
        <div class="sval" id="sv">8 分 · 比较可能推荐</div>
      </div>
    </div>

    <div class="q">
      <div class="qh"><div class="qn">5</div><div><div class="qt">使用过程中最让您困扰的地方是什么？<div class="qs">如加载慢、找不到入口、术语难懂等</div></div></div></div>
      <div class="ta">
        <textarea placeholder="请尽量具体描述，例如：在哪个页面、什么操作下遇到的……" maxlength="500" oninput="document.getElementById('c1').textContent=this.value.length+' / 500'"></textarea>
        <div class="cnt" id="c1">0 / 500</div>
      </div>
    </div>

    <div class="q">
      <div class="qh"><div class="qn">6</div><div><div class="qt">如果可以许一个愿，您最希望我们做什么？</div></div></div>
      <div class="ta">
        <textarea placeholder="新功能、体验改进、价格调整……什么都可以说" maxlength="300" oninput="document.getElementById('c2').textContent=this.value.length+' / 300'"></textarea>
        <div class="cnt" id="c2">0 / 300</div>
      </div>
    </div>

    <div class="q">
      <div class="qh"><div class="qn">7</div><div><div class="qt">留下联系方式（选填）<div class="qs">仅用于回访抽奖，我们承诺不做营销骚扰</div></div></div></div>
      <div class="fields">
        <input type="text" placeholder="您的称呼">
        <input type="email" placeholder="邮箱地址">
      </div>
    </div>

    <div class="submit">
      <label class="agree"><input type="checkbox" checked><span>我同意本问卷数据用于产品改进分析</span></label>
      <button class="btn" type="submit">提交问卷</button>
      <div class="tip">提交后有机会获得年度会员季卡 · 每周抽 20 名</div>
    </div>

  </form>
</div>

<footer>© 2026 拾光调研中心 · 本页面为演示模板，不会收集任何真实数据</footer>

<script>
// 根据已填题目更新顶部进度
(function(){
  var form=document.querySelector('form'), pb=document.getElementById('pb');
  function upd(){
    var groups=['q1','q2','q3'], done=0, total=7;
    if(form.querySelector('[name=q1]:checked'))done++;
    if(form.querySelector('[name=q2]:checked'))done++;
    if(form.querySelector('[name=q3]:checked'))done++;
    done++; // 滑块默认已填
    form.querySelectorAll('textarea').forEach(function(t){if(t.value.trim())done++});
    if(form.querySelector('input[type=email]').value.trim())done++;
    pb.style.width=Math.min(100,Math.round(done/total*100))+'%';
  }
  form.addEventListener('input',upd);
  form.addEventListener('change',upd);
  upd();
})();
</script>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1793.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

399 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
支付成功感谢页 HTML 单页源码（订单确认模板）
上一篇 4小时前
屿岛设计事务所团队介绍页 HTML 单页源码
下一篇 4小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服