Page Helpfulness Feedback
Every page on your website serves a purpose, and this widget helps measure whether it's achieving that goal. The compact design starts with a simple thumbs up/down question, then conditionally expands based on the response. Positive feedback captures what was helpful, while negative feedback identifies what was missing or confusing. Perfect for documentation sites, help centers, product pages, and any content where user understanding matters.
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
export function pageFeedbackSurvey(form: FormTs) {
// Page Helpfulness Feedback - On-Page Content Widget
// Demonstrates: ThumbRating, SuggestionChips, RadioButton, EmojiRating, Conditional Visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Was this page helpful?',
computedValue: () => 'Your feedback helps us improve our content.',
customStyles: {
backgroundColor: '#3b82f6',
color: 'white',
padding: '16px',
borderRadius: '8px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Primary Helpfulness Vote
// ============================================
const primarySection = form.addSubform('primary', {
title: ''
});
primarySection.addRow(row => {
row.addThumbRating('helpful', {
label: 'Did this page answer your question?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, helpful',
downLabel: 'No, not helpful',
alignment: 'center'
});
});
// ============================================
// SECTION 2: Purpose Matching
// ============================================
const purposeSection = form.addSubform('purpose', {
title: 'About Your Visit',
isVisible: () => primarySection.thumbRating('helpful')?.value() !== null
});
purposeSection.addRow(row => {
row.addRadioButton('visitPurpose', {
label: 'What were you trying to accomplish?',
options: [
{ id: 'learn', name: 'Learn how to do something' },
{ id: 'troubleshoot', name: 'Solve a problem' },
{ id: 'research', name: 'Research before deciding' },
{ id: 'reference', name: 'Find specific information' },
{ id: 'explore', name: 'Just browsing' }
],
orientation: 'vertical'
});
});
purposeSection.addRow(row => {
row.addThumbRating('goalAchieved', {
label: 'Did you achieve your goal?',
size: 'md',
showLabels: true,
upLabel: 'Yes',
downLabel: 'Not yet',
alignment: 'center',
isVisible: () => {
const purpose = purposeSection.radioButton('visitPurpose')?.value();
return purpose !== null && purpose !== undefined && purpose !== 'explore';
}
});
});
// ============================================
// SECTION 3: Positive Feedback Path
// ============================================
const positiveSection = form.addSubform('positive', {
title: 'Glad we could help!',
isVisible: () => primarySection.thumbRating('helpful')?.value() === 'up',
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
positiveSection.addRow(row => {
row.addSuggestionChips('whatHelped', {
label: 'What was most helpful? (optional)',
suggestions: [
{ id: 'clear', name: 'Clear explanation' },
{ id: 'examples', name: 'Good examples' },
{ id: 'complete', name: 'Complete information' },
{ id: 'organized', name: 'Well organized' },
{ id: 'quick', name: 'Quick to find' },
{ id: 'accurate', name: 'Accurate info' }
],
alignment: 'center',
max: 3
});
});
positiveSection.addRow(row => {
row.addEmojiRating('satisfaction', {
label: 'How would you rate your overall experience?',
preset: 'satisfaction',
size: 'md',
alignment: 'center'
});
});
// ============================================
// SECTION 4: Negative Feedback Path
// ============================================
const negativeSection = form.addSubform('negative', {
title: 'Sorry about that. Help us improve:',
isVisible: () => primarySection.thumbRating('helpful')?.value() === 'down',
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
negativeSection.addRow(row => {
row.addSuggestionChips('whatsMissing', {
label: 'What was the problem?',
suggestions: [
{ id: 'incomplete', name: 'Missing information' },
{ id: 'confusing', name: 'Hard to understand' },
{ id: 'outdated', name: 'Outdated content' },
{ id: 'wrong', name: 'Incorrect info' },
{ id: 'irrelevant', name: 'Not what I needed' },
{ id: 'navigation', name: 'Hard to find' }
],
alignment: 'center'
});
});
negativeSection.addSpacer({ height: '12px' });
negativeSection.addRow(row => {
row.addTextarea('improvementSuggestion', {
label: () => {
const issues = negativeSection.suggestionChips('whatsMissing')?.value() || [];
if (issues.includes('incomplete')) return 'What information were you looking for?';
if (issues.includes('confusing')) return 'What part was confusing?';
if (issues.includes('outdated') || issues.includes('wrong')) return 'What needs to be corrected?';
return 'How can we improve this page?';
},
placeholder: 'Please share any specific details...',
rows: 3
});
});
// ============================================
// SECTION 5: Content Quality Rating
// ============================================
const qualitySection = form.addSubform('quality', {
title: 'Rate the Content',
isVisible: () => primarySection.thumbRating('helpful')?.value() !== null
});
qualitySection.addRow(row => {
row.addStarRating('clarity', {
label: 'Clarity',
maxStars: 5,
size: 'sm',
showCounter: false
}, '1fr');
row.addStarRating('completeness', {
label: 'Completeness',
maxStars: 5,
size: 'sm',
showCounter: false
}, '1fr');
row.addStarRating('usefulness', {
label: 'Usefulness',
maxStars: 5,
size: 'sm',
showCounter: false
}, '1fr');
});
// ============================================
// SECTION 6: Search Experience (for troubleshooters)
// ============================================
const searchSection = form.addSubform('search', {
title: 'Finding This Page',
isVisible: () => {
const purpose = purposeSection.radioButton('visitPurpose')?.value();
return purpose === 'troubleshoot' || purpose === 'reference';
}
});
searchSection.addRow(row => {
row.addRadioButton('howFound', {
label: 'How did you find this page?',
options: [
{ id: 'search', name: 'Search engine' },
{ id: 'site-search', name: 'Site search' },
{ id: 'navigation', name: 'Navigation/menu' },
{ id: 'link', name: 'Link from another page' },
{ id: 'direct', name: 'Bookmark/direct link' }
],
orientation: 'horizontal'
});
});
searchSection.addRow(row => {
row.addRatingScale('findability', {
label: 'How easy was it to find what you needed?',
preset: 'ces',
lowLabel: 'Very Difficult',
highLabel: 'Very Easy',
alignment: 'center',
size: 'sm'
});
});
// ============================================
// SECTION 7: Follow-Up Option
// ============================================
const followUpSection = form.addSubform('followUp', {
title: 'Stay Connected',
isVisible: () => {
const helpful = primarySection.thumbRating('helpful')?.value();
return helpful === 'down' || purposeSection.thumbRating('goalAchieved')?.value() === 'down';
}
});
followUpSection.addRow(row => {
row.addCheckbox('wantsFollowUp', {
label: "I'd like someone to follow up with me about this"
});
});
followUpSection.addRow(row => {
row.addEmail('contactEmail', {
label: 'Your email',
placeholder: 'you@example.com',
isRequired: () => followUpSection.checkbox('wantsFollowUp')?.value() === true,
isVisible: () => followUpSection.checkbox('wantsFollowUp')?.value() === true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => primarySection.thumbRating('helpful')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const helpful = primarySection.thumbRating('helpful')?.value();
const purpose = purposeSection.radioButton('visitPurpose')?.value();
const goalAchieved = purposeSection.thumbRating('goalAchieved')?.value();
const whatHelped = positiveSection.suggestionChips('whatHelped')?.value() || [];
const whatsMissing = negativeSection.suggestionChips('whatsMissing')?.value() || [];
const clarity = qualitySection.starRating('clarity')?.value();
const completeness = qualitySection.starRating('completeness')?.value();
const usefulness = qualitySection.starRating('usefulness')?.value();
const satisfaction = positiveSection.emojiRating('satisfaction')?.value();
const purposeLabels: Record<string, string> = {
'learn': 'Learning',
'troubleshoot': 'Problem solving',
'research': 'Research',
'reference': 'Reference lookup',
'explore': 'Exploring'
};
const satisfactionLabels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
let summary = `Page Feedback\n`;
summary += `${''.repeat(16)}\n\n`;
summary += ` Helpful: ${helpful === 'up' ? ' Yes' : ' No'}\n`;
if (purpose) {
summary += ` Purpose: ${purposeLabels[purpose] || purpose}\n`;
}
if (goalAchieved) {
summary += ` Goal Achieved: ${goalAchieved === 'up' ? 'Yes' : 'Not yet'}\n`;
}
if (helpful === 'up' && whatHelped.length > 0) {
summary += `\n Helpful aspects: ${whatHelped.length} selected\n`;
}
if (helpful === 'down' && whatsMissing.length > 0) {
summary += `\n Issues: ${whatsMissing.length} identified\n`;
}
if (clarity || completeness || usefulness) {
const avg = Math.round(((clarity || 0) + (completeness || 0) + (usefulness || 0)) /
((clarity ? 1 : 0) + (completeness ? 1 : 0) + (usefulness ? 1 : 0)));
summary += `\n Content Rating: ${avg}/5 avg\n`;
}
if (satisfaction) {
summary += `\n Satisfaction: ${satisfactionLabels[satisfaction] || satisfaction}\n`;
}
return summary;
},
customStyles: () => {
const helpful = primarySection.thumbRating('helpful')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (helpful === 'up') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
}
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const helpful = primarySection.thumbRating('helpful')?.value();
if (helpful === 'up') return 'Send Feedback';
if (helpful === 'down') return 'Submit & Help Us Improve';
return 'Submit Feedback';
},
isVisible: () => primarySection.thumbRating('helpful')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thanks for your feedback!',
message: 'Your input helps us create better content. We review all feedback to continuously improve our documentation.'
});
}
Frequently Asked Questions
Where should I place this feedback widget?
Place it at the bottom of content pages, after the main information but before related links or navigation. For documentation, position it after the last paragraph. For help articles, place it before the 'Related articles' section. Visibility matters - don't hide it below excessive footer content.
How do I handle negative feedback?
Negative feedback is valuable for improvement. Review common themes weekly, prioritize content updates based on frequency of issues, and consider reaching out to users who provide contact info. Track whether changes reduce negative feedback over time.
Should I ask for details on positive feedback?
Yes, but briefly. Knowing what users found helpful reinforces good practices and can guide future content creation. Keep the positive path short - just a few optional checkboxes about what was valuable.
What's the best way to ask 'Was this page helpful?'
A binary thumbs up/down is most effective - it's fast and clear. Avoid confusing scales or ambiguous options. The simplicity encourages responses, and follow-up questions capture the nuance for those willing to share more.
How do I increase response rates?
Keep the initial interaction simple (one click), make the widget visually noticeable but not intrusive, time the appearance appropriately (after user has had time to read), and ensure mobile responsiveness. A/B test different placements and timing.
Can I use this for different content types?
Yes, customize the follow-up questions for your content. Documentation might ask about code examples and clarity, while product pages might ask about purchase decisions. The core thumbs interaction stays the same, but context-specific follow-ups add value.