Expectation vs Reality Survey
Understanding the gap between customer expectations and reality is crucial for improving satisfaction. This survey uses dual slider scales to capture what customers expected before their experience and how it actually compared. The form automatically calculates gaps, highlights areas where you exceed or fall short, and provides visual feedback. Perfect for product launches, service improvements, and customer journey optimization.
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
export function customerExpectationSurvey(form: FormTs) {
// Expectation vs Reality Survey - Gap Analysis
// Demonstrates: Dual Sliders, Gap Analysis, Dynamic Styling, MatrixQuestion, Computed Values
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Expectation vs Reality',
computedValue: () => 'Help us understand how your experience compared to your expectations.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Context
// ============================================
const contextSection = form.addSubform('context', {
title: 'About Your Experience'
});
contextSection.addRow(row => {
row.addDropdown('experienceType', {
label: 'What type of experience are you rating?',
options: [
{ id: 'purchase', name: 'Product Purchase' },
{ id: 'service', name: 'Service Interaction' },
{ id: 'support', name: 'Customer Support' },
{ id: 'onboarding', name: 'Onboarding Process' },
{ id: 'delivery', name: 'Delivery Experience' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select experience type',
isRequired: true
}, '1fr');
row.addDatepicker('experienceDate', {
label: 'When did this happen?',
maxDate: () => new Date().toISOString().split('T')[0]
}, '1fr');
});
// ============================================
// SECTION 2: Overall Expectation vs Reality
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Experience Gap',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
overallSection.addRow(row => {
row.addTextPanel('overallInstructions', {
computedValue: () => 'Rate your expectations BEFORE the experience and what you ACTUALLY received.',
customStyles: {
fontStyle: 'italic',
color: '#64748b',
marginBottom: '8px'
}
});
});
overallSection.addRow(row => {
row.addSlider('overallExpectation', {
label: 'What did you EXPECT? (1 = Very Low, 10 = Very High)',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
}, '1fr');
row.addSlider('overallReality', {
label: 'What did you ACTUALLY get? (1 = Very Poor, 10 = Excellent)',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
}, '1fr');
});
// Gap indicator
overallSection.addRow(row => {
row.addTextPanel('overallGap', {
label: 'Experience Gap',
computedValue: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
const gap = reality - expectation;
if (gap > 0) return `+${gap} - We exceeded your expectations!`;
if (gap < 0) return `${gap} - We fell short of your expectations`;
return '0 - We met your expectations exactly';
},
customStyles: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
const gap = reality - expectation;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
textAlign: 'center',
fontWeight: 'bold',
fontSize: '18px'
};
if (gap >= 2) return { ...baseStyles, backgroundColor: '#d1fae5', color: '#065f46', border: '2px solid #10b981' };
if (gap > 0) return { ...baseStyles, backgroundColor: '#ecfdf5', color: '#059669' };
if (gap === 0) return { ...baseStyles, backgroundColor: '#fef3c7', color: '#92400e' };
if (gap > -2) return { ...baseStyles, backgroundColor: '#fee2e2', color: '#dc2626' };
return { ...baseStyles, backgroundColor: '#fecaca', color: '#991b1b', border: '2px solid #ef4444' };
}
});
});
// ============================================
// SECTION 3: Detailed Dimensions Matrix
// ============================================
const dimensionsSection = form.addSubform('dimensions', {
title: 'Rate Specific Dimensions',
customStyles: { marginTop: '16px' }
});
dimensionsSection.addRow(row => {
row.addMatrixQuestion('dimensionRatings', {
label: 'How did each aspect compare to your expectations?',
rows: [
{ id: 'quality', label: 'Quality', isRequired: true },
{ id: 'value', label: 'Value for Money', isRequired: true },
{ id: 'speed', label: 'Speed/Timeliness' },
{ id: 'ease', label: 'Ease of Use' },
{ id: 'communication', label: 'Communication' },
{ id: 'support', label: 'Support/Help' }
],
columns: [
{ id: 'far-below', label: 'Far Below' },
{ id: 'below', label: 'Below' },
{ id: 'met', label: 'Met' },
{ id: 'above', label: 'Above' },
{ id: 'far-above', label: 'Far Above' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Emotional Response
// ============================================
const emotionalSection = form.addSubform('emotional', {
title: 'Your Emotional Response',
isVisible: () => {
const expectation = overallSection.slider('overallExpectation')?.value();
const reality = overallSection.slider('overallReality')?.value();
return expectation !== null && expectation !== undefined && reality !== null && reality !== undefined;
}
});
emotionalSection.addRow(row => {
row.addEmojiRating('emotionalResponse', {
label: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
const gap = reality - expectation;
if (gap > 0) return 'How do you feel about exceeding your expectations?';
if (gap < 0) return 'How do you feel about the experience falling short?';
return 'How do you feel about the experience meeting expectations?';
},
preset: 'satisfaction',
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Deep Dive - Exceeded Expectations
// ============================================
const exceededSection = form.addSubform('exceeded', {
title: 'What Exceeded Your Expectations?',
isVisible: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
return (reality - expectation) > 0;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
exceededSection.addRow(row => {
row.addSuggestionChips('positiveFactors', {
label: 'Select what pleasantly surprised you',
suggestions: [
{ id: 'quality', name: 'Better quality than expected' },
{ id: 'speed', name: 'Faster than expected' },
{ id: 'service', name: 'Outstanding service' },
{ id: 'value', name: 'Great value' },
{ id: 'extras', name: 'Unexpected extras' },
{ id: 'communication', name: 'Excellent communication' }
],
alignment: 'center'
});
});
exceededSection.addSpacer({ height: '16px' });
exceededSection.addRow(row => {
row.addTextarea('whatExceeded', {
label: 'Tell us more about what exceeded your expectations',
placeholder: 'What specific aspects pleasantly surprised you?',
rows: 3
});
});
// ============================================
// SECTION 6: Deep Dive - Fell Short
// ============================================
const shortfallSection = form.addSubform('shortfall', {
title: 'Where Did We Fall Short?',
isVisible: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
return (reality - expectation) < 0;
},
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
shortfallSection.addRow(row => {
row.addSuggestionChips('negativeFactors', {
label: 'Select what disappointed you',
suggestions: [
{ id: 'quality', name: 'Lower quality than expected' },
{ id: 'speed', name: 'Slower than expected' },
{ id: 'service', name: 'Poor service' },
{ id: 'value', name: 'Not worth the price' },
{ id: 'missing', name: 'Missing features/items' },
{ id: 'communication', name: 'Poor communication' }
],
alignment: 'center'
});
});
shortfallSection.addSpacer({ height: '16px' });
shortfallSection.addRow(row => {
row.addTextarea('whatFellShort', {
label: 'Tell us specifically where we fell short',
placeholder: 'What did you expect that we failed to deliver?',
rows: 3,
isRequired: true
});
});
// ============================================
// SECTION 7: Future Expectations
// ============================================
const futureSection = form.addSubform('future', {
title: 'Looking Forward'
});
futureSection.addRow(row => {
row.addRatingScale('futureExpectation', {
label: 'Based on this experience, what would you expect next time?',
preset: 'likert-5',
lowLabel: 'Much lower expectations',
highLabel: 'Much higher expectations',
alignment: 'center'
});
});
futureSection.addRow(row => {
row.addStarRating('recommendLikelihood', {
label: 'How likely are you to recommend us based on this experience?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Gap Analysis Summary',
isVisible: () => {
const expectation = overallSection.slider('overallExpectation')?.value();
const reality = overallSection.slider('overallReality')?.value();
return expectation !== null && expectation !== undefined && reality !== null && reality !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('gapSummary', {
computedValue: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
const gap = reality - expectation;
const emotional = emotionalSection.emojiRating('emotionalResponse')?.value();
const futureExp = futureSection.ratingScale('futureExpectation')?.value();
const recommend = futureSection.starRating('recommendLikelihood')?.value();
const dimensionRatings = dimensionsSection.matrixQuestion('dimensionRatings')?.value();
let emoji = '';
let status = '';
if (gap >= 2) { emoji = ''; status = 'Significantly Exceeded'; }
else if (gap > 0) { emoji = ''; status = 'Exceeded'; }
else if (gap === 0) { emoji = ''; status = 'Met'; }
else if (gap > -2) { emoji = ''; status = 'Below'; }
else { emoji = ''; status = 'Significantly Below'; }
let summary = `Gap Analysis Report\n`;
summary += `${''.repeat(25)}\n\n`;
summary += ` Expected: ${expectation}/10\n`;
summary += ` Reality: ${reality}/10\n`;
summary += ` Gap: ${gap > 0 ? '+' : ''}${gap} (${status})\n`;
if (emotional) {
const moodLabels: Record<string, string> = {
'very-bad': ' Very Unhappy',
'bad': ' Unhappy',
'neutral': ' Neutral',
'good': ' Happy',
'excellent': ' Delighted'
};
summary += `\n Feeling: ${moodLabels[emotional] || emotional}\n`;
}
if (dimensionRatings) {
const exceeded = Object.values(dimensionRatings).filter(v => v === 'far-above' || v === 'above').length;
const met = Object.values(dimensionRatings).filter(v => v === 'met').length;
const below = Object.values(dimensionRatings).filter(v => v === 'far-below' || v === 'below').length;
summary += `\n Dimensions: ${exceeded} exceeded, ${met} met, ${below} below\n`;
}
if (recommend) {
summary += `\n Recommendation: ${recommend}/5 stars`;
}
return summary;
},
customStyles: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
const gap = reality - expectation;
const baseStyles = {
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (gap >= 2) return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
if (gap > 0) return { ...baseStyles, backgroundColor: '#ecfdf5', borderLeft: '4px solid #34d399' };
if (gap === 0) return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
if (gap > -2) return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
return { ...baseStyles, backgroundColor: '#fecaca', borderLeft: '4px solid #dc2626' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const expectation = overallSection.slider('overallExpectation')?.value() ?? 5;
const reality = overallSection.slider('overallReality')?.value() ?? 5;
const gap = reality - expectation;
if (gap > 0) return 'Submit Positive Feedback';
if (gap < 0) return 'Submit Feedback & Help Us Improve';
return 'Submit Feedback';
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your detailed feedback!',
message: 'Your gap analysis helps us understand exactly where we excel and where we need to improve. We truly appreciate you taking the time to compare your expectations with reality.'
});
}
Frequently Asked Questions
What is an Expectation vs Reality survey?
It's a survey that measures the gap between what customers expected before an experience and what they actually received. By comparing these two ratings, you can identify where you exceed expectations (positive gap) or fall short (negative gap).
How is the gap calculated?
The gap is calculated as Reality minus Expectation. A positive gap means you exceeded expectations, zero means you met them exactly, and a negative gap indicates you fell short of expectations.
When should I use this survey?
Use this survey after key customer interactions such as product purchases, service deliveries, onboarding experiences, or any touchpoint where customers have prior expectations. It's especially valuable after marketing campaigns or product launches.
Can I customize the dimensions being measured?
Yes, you can customize all dimensions to match your specific product or service. Common dimensions include quality, speed, value, support, and ease of use, but you can add any aspects relevant to your business.
How do I interpret the color-coded results?
Green indicates you exceeded expectations, yellow means you met them, and red shows where you fell short. The intensity of the color reflects the size of the gap, helping you quickly identify areas needing attention.
What's a good target for expectation gaps?
Ideally, aim for small positive gaps (slightly exceeding expectations). Large positive gaps might indicate under-promising, while negative gaps need immediate attention. Consistently meeting expectations (zero gap) is also a solid baseline.