NPS Survey (Standard)
The Net Promoter Score (NPS) is the gold standard for measuring customer loyalty. This template provides a professional NPS survey that asks customers to rate how likely they are to recommend your product or service on a scale of 0-10, followed by an open-ended question to capture qualitative feedback. The survey automatically categorizes respondents into Promoters (9-10), Passives (7-8), and Detractors (0-6), helping you understand your customer base and identify areas for improvement.
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
export function npsStandardSurvey(form: FormTs) {
// NPS Survey - Net Promoter Score with rich feedback collection
// Demonstrates: Rating Scale (NPS), Emoji Rating, Suggestion Chips, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'We Value Your Opinion',
computedValue: () => 'Your feedback helps us improve and serve you better.',
customStyles: {
backgroundColor: '#6366f1',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: NPS Score
// ============================================
const npsSection = form.addSubform('npsSection', {
title: 'Net Promoter Score',
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
npsSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend us to a friend or colleague?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
isRequired: true
});
});
// Dynamic follow-up based on NPS category
npsSection.addRow(row => {
row.addTextarea('npsReason', {
label: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
switch (category) {
case 'promoter': return "That's great to hear! What do you love most about us?";
case 'passive': return 'Thanks for your feedback! What would make us a 9 or 10?';
case 'detractor': return "We're sorry to hear that. What went wrong?";
default: return 'Tell us more about your rating';
}
},
placeholder: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'Share what makes us special...';
if (category === 'passive') return 'Your suggestions help us improve...';
if (category === 'detractor') return "We're listening and want to make it right...";
return 'Your feedback...';
},
rows: 3,
autoExpand: true,
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
});
// ============================================
// SECTION 2: Quick Mood Check (Emoji Rating)
// ============================================
const moodSection = form.addSubform('moodSection', {
title: 'How Do You Feel?',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
moodSection.addRow(row => {
row.addEmojiRating('mood', {
label: 'How would you describe your overall experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Positive Highlights (for Promoters/Passives)
// ============================================
const highlightsSection = form.addSubform('highlights', {
title: 'What Did You Like?',
isVisible: () => {
const score = npsSection.ratingScale('npsScore')?.value();
return score !== null && score !== undefined && score >= 5;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
highlightsSection.addRow(row => {
row.addSuggestionChips('bestParts', {
label: 'Select what you liked most (up to 3)',
suggestions: [
{ id: 'quality', name: 'Product quality' },
{ id: 'service', name: 'Customer service' },
{ id: 'price', name: 'Fair pricing' },
{ id: 'ease', name: 'Easy to use' },
{ id: 'speed', name: 'Fast delivery' },
{ id: 'reliable', name: 'Reliability' },
{ id: 'support', name: 'Great support' },
{ id: 'innovation', name: 'Innovation' }
],
max: 3,
alignment: 'center'
});
});
// ============================================
// SECTION 4: Areas for Improvement (for Passives/Detractors)
// ============================================
const improvementsSection = form.addSubform('improvements', {
title: 'What Could We Improve?',
isVisible: () => {
const score = npsSection.ratingScale('npsScore')?.value();
return score !== null && score !== undefined && score <= 7;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
improvementsSection.addRow(row => {
row.addSuggestionChips('improvementAreas', {
label: 'Select areas that need improvement',
suggestions: [
{ id: 'quality', name: 'Product quality' },
{ id: 'service', name: 'Customer service' },
{ id: 'price', name: 'Pricing' },
{ id: 'usability', name: 'Ease of use' },
{ id: 'speed', name: 'Speed/Delivery' },
{ id: 'reliability', name: 'Reliability' },
{ id: 'support', name: 'Support response' },
{ id: 'communication', name: 'Communication' }
],
alignment: 'center'
});
});
// ============================================
// SECTION 5: Contact Information
// ============================================
const contactSection = form.addSubform('contactSection', {
title: 'Stay in Touch',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
contactSection.addRow(row => {
row.addCheckbox('allowContact', {
label: 'You may contact me about my feedback'
});
});
contactSection.addRow(row => {
row.addEmail('contactEmail', {
label: 'Email address',
placeholder: 'your@email.com',
isRequired: () => contactSection.checkbox('allowContact')?.value() === true,
isVisible: () => contactSection.checkbox('allowContact')?.value() === true
});
});
// ============================================
// SECTION 6: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const score = npsSection.ratingScale('npsScore')?.value();
const category = npsSection.ratingScale('npsScore')?.npsCategory();
const mood = moodSection.emojiRating('mood')?.value();
const bestParts = highlightsSection.suggestionChips('bestParts')?.value() || [];
const improvements = improvementsSection.suggestionChips('improvementAreas')?.value() || [];
if (score === null || score === undefined) return '';
let emoji = '';
if (category === 'promoter') emoji = '🎉';
else if (category === 'passive') emoji = '🤔';
else emoji = '😟';
let summary = `${emoji} Feedback Summary\n`;
summary += `${'═'.repeat(25)}\n\n`;
summary += `📊 NPS Score: ${score}/10\n`;
summary += `📈 Category: ${category?.charAt(0).toUpperCase()}${category?.slice(1)}\n`;
if (mood) {
const moodLabels: Record<string, string> = {
'very-bad': '😢 Very Unhappy',
'bad': '😕 Unhappy',
'neutral': '😐 Neutral',
'good': '😊 Happy',
'excellent': '😃 Very Happy'
};
summary += `\n${moodLabels[mood] || mood}\n`;
}
if (bestParts.length > 0) {
summary += `\n✨ Liked: ${bestParts.length} items selected`;
}
if (improvements.length > 0) {
summary += `\n⚠️ To improve: ${improvements.length} items selected`;
}
return summary;
},
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (category === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return baseStyles;
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your response helps us improve our service. We truly appreciate you taking the time to share your thoughts with us.'
});
}
Frequently Asked Questions
What is Net Promoter Score (NPS)?
NPS is a customer loyalty metric that measures how likely customers are to recommend your product or service. It's calculated by subtracting the percentage of Detractors (0-6) from Promoters (9-10). Scores range from -100 to +100, with positive scores indicating more promoters than detractors.
How do I calculate my NPS score?
To calculate NPS: count the percentage of Promoters (scores 9-10) and subtract the percentage of Detractors (scores 0-6). Passives (7-8) are not included in the calculation. For example, if 60% are Promoters and 20% are Detractors, your NPS is 40.
Can I customize the follow-up question?
Yes. The template includes a dynamic follow-up question that changes based on the score. You can customize the questions for Promoters, Passives, and Detractors separately to gather the most relevant feedback from each group.
When should I send NPS surveys?
Best practices include: after a purchase or service interaction, at regular intervals (quarterly or bi-annually), after onboarding, or at key milestones in the customer journey. Avoid survey fatigue by not sending too frequently.
What's a good NPS score?
Generally, any positive score (above 0) is good, 50+ is excellent, and 70+ is world-class. However, benchmarks vary by industry. B2B software typically sees 30-40, retail 50-60, and consumer services 40-50. Compare your score to industry benchmarks for context.