基础单页调查表
这个模板最简单,直接展示所有问题，适合快速收集少量反馈。
（图片来源网络，侵删）
特点：
- 简洁明了：所有问题在一个页面上。
- 基础样式：使用内联CSS，快速上手。
- 响应式：在手机和电脑上都能正常显示。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">用户满意度调查</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
}
.container {
max-width: 700px;
margin: 20px auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Important for padding and width */
}
.radio-group label,
.checkbox-group label {
font-weight: normal;
display: inline-block;
margin-right: 15px;
}
button {
display: block;
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>用户体验调查问卷</h1>
<p>感谢您抽出宝贵时间参与本次调查！您的反馈对我们至关重要。</p>
<form action="#" method="post">
<div class="form-group">
<label for="name">您的姓名:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">电子邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="satisfaction">总体满意度:</label>
<select id="satisfaction" name="satisfaction">
<option value="">请选择...</option>
<option value="5">非常满意</option>
<option value="4">满意</option>
<option value="3">一般</option>
<option value="2">不满意</option>
<option value="1">非常不满意</option>
</select>
</div>
<div class="form-group">
<label>您最喜欢我们产品的哪个功能？ (可多选)</label>
<div class="checkbox-group">
<input type="checkbox" id="feature1" name="features" value="功能A">
<label for="feature1">功能A</label>
<input type="checkbox" id="feature2" name="features" value="功能B">
<label for="feature2">功能B</label>
<input type="checkbox" id="feature3" name="features" value="功能C">
<label for="feature3">功能C</label>
</div>
</div>
<div class="form-group">
<label>您会向朋友推荐我们的产品吗？</label>
<div class="radio-group">
<input type="radio" id="rec-yes" name="recommend" value="yes">
<label for="rec-yes">会</label>
<input type="radio" id="rec-no" name="recommend" value="no">
<label for="rec-no">不会</label>
<input type="radio" id="rec-unsure" name="recommend" value="unsure">
<label for="rec-unsure">不确定</label>
</div>
</div>
<div class="form-group">
<label for="feedback">其他意见或建议:</label>
<textarea id="feedback" name="feedback" rows="5"></textarea>
</div>
<button type="submit">提交问卷</button>
</form>
</div>
</body>
</html>
分步向导式调查表
这个模板将长问卷分成几个步骤,用户体验更好，能有效提高完成率。
特点：
- 分步引导：将问卷分为“个人信息”、“产品评价”、“建议”等步骤。
- 进度条：直观显示当前进度。
- 导航按钮：可以前进和后退修改答案。
- 更现代的UI：使用了更现代的设计风格。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">分步式产品调查</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.survey-container {
background: white;
width: 90%;
max-width: 600px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
.progress-bar {
height: 5px;
background: #e0e0e0;
width: 100%;
}
.progress {
height: 100%;
background: #4CAF50;
width: 33.33%; /* Default for step 1 */
transition: width 0.4s ease;
}
.form-step {
padding: 30px;
display: none;
}
.form-step.active {
display: block;
}
h2 {
margin-top: 0;
color: #2c3e50;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
.radio-group label {
font-weight: normal;
display: inline-block;
margin-right: 15px;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-next {
background-color: #4CAF50;
color: white;
}
.btn-next:hover {
background-color: #45a049;
}
.btn-prev {
background-color: #f1f1f1;
color: #333;
}
.btn-prev:hover {
background-color: #ddd;
}
.btn-submit {
background-color: #2196F3;
color: white;
width: 100%;
}
.btn-submit:hover {
background-color: #0b7dda;
}
</style>
</head>
<body>
<div class="survey-container">
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<!-- 步骤 1: 基本信息 -->
<div class="form-step active" id="step1">
<h2>步骤 1 / 3: 基本信息</h2>
<form id="surveyForm">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="button-group">
<div></div> <!-- 占位，保持按钮对齐 -->
<button type="button" class="btn-next" onclick="nextStep(2)">下一步</button>
</div>
</form>
</div>
<!-- 步骤 2: 产品评价 -->
<div class="form-step" id="step2">
<h2>步骤 2 / 3: 产品评价</h2>
<div class="form-group">
<label>您对产品的整体满意度如何？</label>
<div class="radio-group">
<input type="radio" id="sat1" name="satisfaction" value="非常满意">
<label for="sat1">非常满意</label>
<input type="radio" id="sat2" name="satisfaction" value="满意">
<label for="sat2">满意</label>
<input type="radio" id="sat3" name="satisfaction" value="一般">
<label for="sat3">一般</label>
<input type="radio" id="sat4" name="satisfaction" value="不满意">
<label for="sat4">不满意</label>
</div>
</div>
<div class="button-group">
<button type="button" class="btn-prev" onclick="nextStep(1)">上一步</button>
<button type="button" class="btn-next" onclick="nextStep(3)">下一步</button>
</div>
</div>
<!-- 步骤 3: 意见建议 -->
<div class="form-step" id="step3">
<h2>步骤 3 / 3: 意见与建议</h2>
<div class="form-group">
<label for="feedback">请留下您的宝贵意见或建议:</label>
<textarea id="feedback" name="feedback" rows="5"></textarea>
</div>
<div class="button-group">
<button type="button" class="btn-prev" onclick="nextStep(2)">上一步</button>
<button type="submit" form="surveyForm" class="btn-submit">提交问卷</button>
</div>
</div>
</div>
<script>
let currentStep = 1;
const totalSteps = 3;
function nextStep(step) {
// 隐藏当前步骤
document.getElementById(`step${currentStep}`).classList.remove('active');
// 显示新步骤
document.getElementById(`step${step}`).classList.add('active');
// 更新进度条
const progress = (step / totalSteps) * 100;
document.getElementById('progress').style.width = `${progress}%`;
// 更新当前步骤
currentStep = step;
}
// 监听表单提交事件
document.getElementById('surveyForm').addEventListener('submit', function(event) {
// 这里可以添加数据验证逻辑
alert('感谢您的提交！'); // 实际应用中，这里应该是数据提交到服务器的逻辑
event.preventDefault(); // 阻止表单默认提交行为，用于演示
});
</script>
</body>
</html>
专业级NPS（净推荐值）调查表
这个模板专门用于测量用户忠诚度,设计专业，交互流畅。
特点：
- 专注NPS：核心问题是“您有多大可能将我们的产品推荐给朋友或同事？”
- 交互式评分：用户可以在一个0-10的滑块上选择分数。
- 动态反馈：根据用户选择的分数（推荐者/被动者/贬损者），显示不同的问题。
- 现代化设计：使用卡片式布局和柔和的色彩。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">NPS 用户忠诚度调查</title>
<style>
:root {
--primary-color: #007bff;
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-bg: #f8f9fa;
--border-color: #dee2e6;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--light-bg);
color: #333;
line-height: 1.6;
margin: 0;
padding: 40px 20px;
}
.nps-container {
max-width: 700px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.nps-header {
background: linear-gradient(135deg, var(--primary-color), #0056b3);
color: white;
padding: 40px 30px;
text-align: center;
}
.nps-header h1 {
margin: 0 0 10px 0;
font-size: 28px;
}
.nps-header p {
margin: 0;
opacity: 0.9;
}
.nps-content {
padding: 40px 30px;
}
.nps-question {
text-align: center;
margin-bottom: 40px;
}
.nps-scale {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30px 0;
position: relative;
}
.scale-point {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--border-color);
background: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
z-index: 2;
}
.scale-point:hover {
transform: scale(1.1);
border-color: var(--primary-color);
}
.scale-point.selected {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.scale-labels {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 14px;
color: #6c757d;
}
.nps-followup {
margin-top: 40px;
padding: 25px;
border-radius: 8px;
background: #f8f9fa;
border-left: 4px solid var(--primary-color);
display: none; /* 默认隐藏 */
}
.nps-followup.show {
display: block;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.nps-followup h3 {
margin-top: 0;
}
.nps-followup textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
resize: vertical;
min-height: 100px;
box-sizing: border-box;
}
.button-group {
text-align: center;
margin-top: 30px;
}
.btn-submit {
background-color: var(--primary-color);
color: white;
padding: 12px 40px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-submit:hover {
background-color: #0056b3;
}
.btn-submit:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="nps-container">
<div class="nps-header">
<h1>客户忠诚度调查</h1>
<p>您的反馈对我们至关重要，仅需一分钟</p>
</div>
<div class="nps-content">
<div class="nps-question">
<h2>您有多大可能将我们的产品/服务推荐给朋友或同事？</h2>
<p>（0代表完全不可能，10代表极有可能）</p>
</div>
<div class="nps-scale" id="npsScale">
<!-- Scale points will be generated by JavaScript -->
</div>
<div class="scale-labels">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
<div class="nps-followup" id="followupDetractor">
<h3>我们很遗憾没能让您满意。</h3>
<p>为了改进我们的服务，可以告诉我们您不满意的原因吗？</p>
<textarea id="feedbackDetractor" placeholder="请输入您的反馈..."></textarea>
</div>
<div class="nps-followup" id="followupPassive">
<h3>感谢您的反馈。</h3>
<p>是什么原因让您只给了这个分数？我们如何才能做得更好？</p>
<textarea id="feedbackPassive" placeholder="请输入您的反馈..."></textarea>
</div>
<div class="nps-followup" id="followupPromoter">
<h3>太棒了！非常感谢您的推荐。</h3>
<p>是什么让您如此喜欢我们的产品/服务？</p>
<textarea id="feedbackPromoter" placeholder="请输入您的反馈..."></textarea>
</div>
<div class="button-group">
<button class="btn-submit" id="submitBtn" disabled>提交反馈</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const npsScale = document.getElementById('npsScale');
const submitBtn = document.getElementById('submitBtn');
const followups = {
detractor: document.getElementById('followupDetractor'),
passive: document.getElementById('followupPassive'),
promoter: document.getElementById('followupPromoter')
};
let selectedScore = null;
// 创建0-10的评分点
for (let i = 0; i <= 10; i++) {
const point = document.createElement('div');
point.className = 'scale-point';
point.textContent = i;
point.dataset.score = i;
point.addEventListener('click', selectScore);
npsScale.appendChild(point);
}
function selectScore(event) {
// 移除之前选中的样式
document.querySelectorAll('.scale-point').forEach(p => p.classList.remove('selected'));
// 添加当前选中的样式
event.target.classList.add('selected');
selectedScore = parseInt(event.target.dataset.score);
// 隐藏所有后续问题
Object.values(followups).forEach(f => f.classList.remove('show'));
// 根据分数显示相应的问题
if (selectedScore >= 0 && selectedScore <= 6) {
followups.detractor.classList.add('show');
} else if (selectedScore >= 7 && selectedScore <= 8) {
followups.passive.classList.add('show');
} else if (selectedScore === 9 || selectedScore === 10) {
followups.promoter.classList.add('show');
}
// 启用提交按钮
submitBtn.disabled = false;
}
submitBtn.addEventListener('click', function() {
if (selectedScore === null) {
alert('请先选择您的评分。');
return;
}
// 收集所有反馈数据
const feedbackData = {
score: selectedScore,
feedback: ''
};
// 根据分数类型获取对应的反馈文本
if (selectedScore <= 6) {
feedbackData.feedback = document.getElementById('feedbackDetractor').value;
} else if (selectedScore <= 8) {
feedbackData.feedback = document.getElementById('feedbackPassive').value;
} else {
feedbackData.feedback = document.getElementById('feedbackPromoter').value;
}
// 在实际应用中，这里应该使用 fetch 或 XMLHttpRequest 将数据发送到服务器
console.log('提交的数据:', feedbackData);
// 显示成功消息
alert('感谢您的反馈！您的意见对我们非常重要。');
// 重置表单（可选）
// location.reload();
});
});
</script>
</body>
</html>
如何选择和使用这些模板
- 直接复制：选择您喜欢的模板，将全部代码复制到一个新的
.html文件中。 - ：
- 、问题、选项等文本内容。
- 在
<form>标签的action属性中填入您的服务器端脚本地址（如action="/submit-survey"），以便收集数据。 - 在
name属性中为每个输入字段设置一个唯一的名称，方便服务器识别。
- 调整样式：如果您懂一些CSS，可以修改
<style>标签内的代码来改变颜色、字体、布局等，使其符合您的品牌风格。 - 处理数据：这些模板前端部分的功能已经完成，要真正收集数据，您需要一个后端程序（如 PHP, Python, Node.js, Java 等）来接收
form提交的数据并进行处理。
希望这些模板能帮助您快速创建出专业的调查表！
（图片来源网络，侵删）
