满意度调研问卷生成器
触发词
满意度问卷、NPS调研、服务评价、满意度调查、CSAT
适用场景
- 客户满意度
- 员工敬业度
- 服务/活动评价
不适用场景(边界)
- 需要实时汇总到服务端
- 需要复杂跳题逻辑
工作流(输入 → 产出)
- 确认调研对象与维度
- 生成自包含单文件 HTML 问卷(量表+开放题+本地算分)
- 自检零外链
- 交付并说明转公网收集
HTML 产出规范(强制)
- 自包含单文件:所有 CSS 写在
<style>、所有 JS 写在<script>,零外部 CDN / 零外链字体 / 零外链脚本,双击即开。 - 多端可开:Windows/Mac/iOS Safari/安卓 Chrome 直接打开;移动端响应式(
@media已内置)。 - 本地持久化:需保存的数据用
localStorage(键名带skill_z-satisfaction-survey前缀),刷新不丢;不依赖任何后端。 - 可打印:含
@media print隐藏按钮、保留内容,便于导出 PDF / 纸质。 - 公网策略(A 分层):默认只产出自包含单文件(已多端可用);仅当用户明确说"要链接 / 发公网"时,才调用
本地HTML公网发布器(z-html-public-deploy)部署出 URL——不得擅自公开。
输出模板(直接生成的 HTML 骨架,按需填充)
<!doctype html><html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>满意度调研</title><style>
:root{--p:#2563eb;--p2:#1e40af;--bg:#f7f8fa;--card:#fff;--t:#1f2937;--m:#6b7280;--ok:#16a34a;--w:#d97706;--b:#e5e7eb;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--t);line-height:1.6;padding:16px}
.wrap{max-width:880px;margin:0 auto;background:var(--card);border-radius:14px;padding:22px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
h1{font-size:22px;margin-bottom:6px}
h2{font-size:17px;margin:18px 0 8px;color:var(--p2)}
p.lead{color:var(--m);margin-bottom:14px}
label{display:block;font-size:14px;margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--b);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
textarea{min-height:80px;resize:vertical}
button{background:var(--p);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer;margin:8px 6px 0 0}
button.sec{background:#fff;color:var(--p);border:1px solid var(--p)}
button:hover{opacity:.92}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>div{flex:1;min-width:160px}
.card{border:1px solid var(--b);border-radius:10px;padding:12px;margin:8px 0;background:#fff}
.grid{display:grid;gap:8px}
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
th,td{border:1px solid var(--b);padding:8px;text-align:left}
th{background:#eef2ff}
.tag{display:inline-block;background:#eef2ff;color:var(--p2);border-radius:6px;padding:2px 8px;font-size:12px;margin:2px}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px;border-radius:8px;font-size:13px;margin:10px 0}
ul{margin:6px 0 6px 18px}
@media(max-width:560px){.wrap{padding:14px}body{padding:8px}}
@media print{body{background:#fff}.wrap{box-shadow:none;max-width:100%}button{display:none}}
</style></head><body><div class="wrap"><h1>满意度调研</h1><p class="lead">提交后本地计算满意度。</p><label>总体满意度(1-5)</label><div class="row" id="rate"></div><label>您最满意的是?</label><textarea id="good"></textarea><label>可改进的?</label><textarea id="bad"></textarea><button onclick="submit()">提交</button><div id="msg" class="note" style="display:none"></div></div><script>var key='skill_z_satisfaction_survey';var score=0;rate.innerHTML=[1,2,3,4,5].map(n=>'<div><button onclick="pick('+n+')">'+n+'</button></div>').join('');function pick(n){score=n;document.querySelectorAll('#rate button').forEach((b,i)=>b.style.background=i==n-1?'#16a34a':'#2563eb');}function submit(){if(!score){alert('请先打分');return;}var all=JSON.parse(localStorage.getItem(key)||'[]');all.push({score:score,good:good.value,bad:bad.value});localStorage.setItem(key,JSON.stringify(all));var avg=(all.reduce((a,b)=>a+b.score,0)/all.length).toFixed(2);msg.style.display='block';msg.textContent='已记录,当前平均满意度 '+avg+' / 5,共 '+all.length+' 份';}</script></body></html>
使用示例
输入:发个客户满意度问卷,1-5分加两句建议
产出:生成 satisfaction.html,量表评分+开放题,本地算平均分
红线(不可违反)
- 禁止外部依赖
- 禁止伪造满意度数据
- 默认不公开
与其他技能区分
区别于「通用表单问卷HTML」(空壳)——本技能内置 NPS/CSAT 计分逻辑,是场景化问卷。
大白话介绍
想知道客户满不满意?这网页发过去,打分+写两句,提交自动算平均分,不用表格统计。