CSAT Comprehensive Survey
This comprehensive Customer Satisfaction (CSAT) survey goes beyond simple ratings to capture nuanced feedback across multiple dimensions. With dedicated sections for service quality, product experience, support interactions, and value perception, you'll gain actionable insights into what's working and what needs improvement. The survey uses a combination of star ratings, matrix questions, and conditional follow-ups to deliver rich, structured data while remaining easy for customers to complete.
Try the Form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
export function csatDetailed(form: FormTs) {
// CSAT Comprehensive Survey - Multi-dimensional customer satisfaction
// Demonstrates: MatrixQuestion, StarRating x6, RatingScale, EmojiRating, SuggestionChips, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Customer Satisfaction Survey',
computedValue: () => 'Help us serve you better by sharing your experience',
customStyles: {
backgroundColor: '#0ea5e9',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Satisfaction
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Satisfaction',
customStyles: () => {
const rating = overallSection.starRating('overallSatisfaction')?.value();
if (rating !== null && rating !== undefined) {
if (rating >= 4) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (rating >= 3) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
overallSection.addRow(row => {
row.addStarRating('overallSatisfaction', {
label: 'How satisfied are you with your overall experience?',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('experienceMood', {
label: 'How would you describe your experience in one word?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 2: Service Quality Matrix
// ============================================
const serviceSection = form.addSubform('serviceSection', {
title: 'Service Quality',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
serviceSection.addRow(row => {
row.addMatrixQuestion('serviceRatings', {
label: 'Please rate the following aspects of our service:',
rows: [
{ id: 'response', label: 'Response Time', description: 'How quickly we addressed your needs', isRequired: true },
{ id: 'knowledge', label: 'Staff Knowledge', description: 'Expertise and ability to help', isRequired: true },
{ id: 'courtesy', label: 'Courtesy & Professionalism', description: 'How you were treated', isRequired: true },
{ id: 'communication', label: 'Communication', description: 'Clarity and timeliness of updates', isRequired: false },
{ id: 'followup', label: 'Follow-up', description: 'Post-service care and attention', isRequired: false }
],
columns: [
{ id: '1', label: 'Very Poor' },
{ id: '2', label: 'Poor' },
{ id: '3', label: 'Average' },
{ id: '4', label: 'Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Product/Service Satisfaction
// ============================================
const productSection = form.addSubform('productSection', {
title: 'Product/Service Experience',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
productSection.addRow(row => {
row.addStarRating('productQuality', {
label: 'Product/Service Quality',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('easeOfUse', {
label: 'Ease of Use',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
productSection.addRow(row => {
row.addStarRating('reliability', {
label: 'Reliability & Consistency',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('valueForMoney', {
label: 'Value for Money',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
// ============================================
// SECTION 4: Support Experience
// ============================================
const supportSection = form.addSubform('supportSection', {
title: 'Support Experience',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
supportSection.addRow(row => {
row.addRadioButton('contactedSupport', {
label: 'Did you contact our support team during this experience?',
options: [
{ id: 'yes', name: 'Yes, I contacted support' },
{ id: 'no', name: 'No, I did not need support' }
],
orientation: 'horizontal'
});
});
// Conditional support details
const supportDetails = supportSection.addSubform('supportDetails', {
isVisible: () => supportSection.radioButton('contactedSupport')?.value() === 'yes',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px', marginTop: '12px' }
});
supportDetails.addRow(row => {
row.addDropdown('supportChannel', {
label: 'How did you contact support?',
options: [
{ id: 'phone', name: 'Phone' },
{ id: 'email', name: 'Email' },
{ id: 'chat', name: 'Live Chat' },
{ id: 'social', name: 'Social Media' },
{ id: 'inperson', name: 'In-Person' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select channel'
}, '1fr');
row.addDropdown('issueResolved', {
label: 'Was your issue resolved?',
options: [
{ id: 'yes-first', name: 'Yes, on first contact' },
{ id: 'yes-multiple', name: 'Yes, after multiple contacts' },
{ id: 'partially', name: 'Partially resolved' },
{ id: 'no', name: 'No, still unresolved' }
],
placeholder: 'Select'
}, '1fr');
});
supportDetails.addRow(row => {
row.addRatingScale('supportEffort', {
preset: 'ces',
label: 'How easy was it to get the help you needed?',
lowLabel: 'Very Difficult',
highLabel: 'Very Easy',
alignment: 'center'
});
});
supportDetails.addRow(row => {
row.addStarRating('supportRating', {
label: 'Overall support experience rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Strengths & Improvements
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Strengths & Areas for Improvement',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
// Show strengths for satisfied customers (4-5 stars)
const strengthsSubform = feedbackSection.addSubform('strengthsSubform', {
isVisible: () => {
const rating = overallSection.starRating('overallSatisfaction')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
strengthsSubform.addRow(row => {
row.addSuggestionChips('strengths', {
label: 'What did we do well? (select up to 4)',
suggestions: [
{ id: 'quality', name: 'Quality' },
{ id: 'speed', name: 'Speed' },
{ id: 'price', name: 'Fair Pricing' },
{ id: 'support', name: 'Great Support' },
{ id: 'communication', name: 'Communication' },
{ id: 'reliability', name: 'Reliability' },
{ id: 'innovation', name: 'Innovation' },
{ id: 'convenience', name: 'Convenience' }
],
max: 4,
alignment: 'center'
});
});
// Show improvements for less satisfied customers (1-3 stars)
const improvementsSubform = feedbackSection.addSubform('improvementsSubform', {
isVisible: () => {
const rating = overallSection.starRating('overallSatisfaction')?.value();
return rating !== null && rating !== undefined && rating <= 3;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
improvementsSubform.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'What could we improve? (select all that apply)',
suggestions: [
{ id: 'quality', name: 'Product Quality' },
{ id: 'speed', name: 'Response Time' },
{ id: 'price', name: 'Pricing' },
{ id: 'support', name: 'Support Quality' },
{ id: 'communication', name: 'Communication' },
{ id: 'reliability', name: 'Reliability' },
{ id: 'usability', name: 'Ease of Use' },
{ id: 'availability', name: 'Availability' }
],
alignment: 'center'
});
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('additionalComments', {
label: () => {
const rating = overallSection.starRating('overallSatisfaction')?.value();
if (rating !== null && rating !== undefined && rating >= 4) {
return 'Is there anything else you loved about your experience?';
}
return 'Please share more details about how we can improve';
},
placeholder: 'Your feedback helps us improve...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Future Intent
// ============================================
const intentSection = form.addSubform('intentSection', {
title: 'Looking Forward',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
intentSection.addRow(row => {
row.addThumbRating('wouldReturn', {
label: 'Would you use our services again?',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'center',
size: 'lg'
}, '1fr');
row.addThumbRating('wouldRecommend', {
label: 'Would you recommend us to others?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center',
size: 'lg'
}, '1fr');
});
// ============================================
// SECTION 7: Contact Permission
// ============================================
const contactSection = form.addSubform('contactSection', {
title: 'Stay Connected',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
contactSection.addRow(row => {
row.addCheckbox('allowFollowup', {
label: 'You may contact me to discuss my feedback'
});
});
contactSection.addRow(row => {
row.addEmail('email', {
label: 'Email address',
placeholder: 'your@email.com',
isVisible: () => contactSection.checkbox('allowFollowup')?.value() === true,
isRequired: () => contactSection.checkbox('allowFollowup')?.value() === true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const overall = overallSection.starRating('overallSatisfaction')?.value();
const mood = overallSection.emojiRating('experienceMood')?.value();
const productQuality = productSection.starRating('productQuality')?.value();
const easeOfUse = productSection.starRating('easeOfUse')?.value();
const reliability = productSection.starRating('reliability')?.value();
const valueForMoney = productSection.starRating('valueForMoney')?.value();
const wouldReturn = intentSection.thumbRating('wouldReturn')?.value();
const wouldRecommend = intentSection.thumbRating('wouldRecommend')?.value();
const strengths = strengthsSubform.suggestionChips('strengths')?.value() || [];
const improvements = improvementsSubform.suggestionChips('improvements')?.value() || [];
if (overall === null || overall === undefined) return '';
const moodLabels: Record<string, string> = {
'very-bad': 'Very Unhappy',
'bad': 'Unhappy',
'neutral': 'Neutral',
'good': 'Happy',
'excellent': 'Very Happy'
};
let emoji = '';
if (overall >= 4) emoji = '🎉';
else if (overall >= 3) emoji = '🤔';
else emoji = '😟';
let summary = `${emoji} SATISFACTION SUMMARY\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `Overall: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)} (${overall}/5)\n`;
if (mood) {
summary += `Mood: ${moodLabels[mood] || mood}\n`;
}
// Product ratings average
const productRatings = [productQuality, easeOfUse, reliability, valueForMoney].filter(r => r !== null && r !== undefined) as number[];
if (productRatings.length > 0) {
const avg = productRatings.reduce((a, b) => a + b, 0) / productRatings.length;
summary += `\nProduct Score: ${avg.toFixed(1)}/5\n`;
}
if (strengths.length > 0) {
summary += `\n✨ Strengths: ${strengths.length} selected`;
}
if (improvements.length > 0) {
summary += `\n⚠️ Improvements: ${improvements.length} selected`;
}
if (wouldReturn !== null || wouldRecommend !== null) {
summary += '\n\n';
if (wouldReturn) {
summary += `Return: ${wouldReturn === 'up' ? '👍 Yes' : '👎 No'}\n`;
}
if (wouldRecommend) {
summary += `Recommend: ${wouldRecommend === 'up' ? '👍 Yes' : '👎 No'}`;
}
}
return summary;
},
customStyles: () => {
const overall = overallSection.starRating('overallSatisfaction')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (overall !== null && overall !== undefined) {
if (overall >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (overall >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #0ea5e9' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your detailed feedback helps us continuously improve our products and services. We truly appreciate you taking the time to share your experience with us.'
});
}
Frequently Asked Questions
What is CSAT and how is it calculated?
CSAT (Customer Satisfaction Score) measures how satisfied customers are with your product, service, or interaction. It's typically calculated as the percentage of satisfied customers (those who rate 4-5 on a 5-point scale). Formula: (Number of satisfied responses / Total responses) x 100.
Why use a comprehensive CSAT instead of a simple rating?
A comprehensive CSAT survey provides multi-dimensional insights. While a simple rating tells you 'how satisfied' customers are, a detailed survey reveals 'why' they feel that way across service, product, support, and value dimensions - enabling targeted improvements.
How many questions should a CSAT survey have?
Balance is key. This template uses 15-20 questions organized into clear sections. Research shows completion rates drop significantly after 3 minutes, so we've designed this survey to take about 2-3 minutes while capturing comprehensive feedback.
When should I send a CSAT survey?
Send CSAT surveys at key touchpoints: after a purchase, support interaction, service delivery, or at regular intervals for ongoing relationships. The best timing is within 24-48 hours of the interaction while the experience is fresh.
What's a good CSAT score?
A good CSAT score is typically above 75%, with excellent scores reaching 85%+. However, benchmarks vary by industry: retail averages 78%, software/SaaS 78%, and financial services 75%. Compare your scores to industry benchmarks for context.
How does this differ from NPS?
CSAT measures satisfaction with a specific interaction or experience, while NPS measures overall loyalty and likelihood to recommend. This comprehensive CSAT template focuses on the details of the customer experience across multiple dimensions.