First Impression Survey
First impressions make or break customer relationships. This survey captures the emotional moment when users first interact with your product or service. Using emoji-based sentiment tracking, slider scales, and targeted questions, it measures initial reactions, compares expectations to reality, and identifies early friction points. Use these insights to optimize onboarding, messaging, and the critical first-experience journey.
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
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
export function firstImpression(form: FormTs) {
// First Impression Survey - Capture immediate emotional reactions
// Demonstrates: EmojiRating, Slider (sentiment), StarRating, RatingScale, SuggestionChips, ThumbRating, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'First Impression',
computedValue: () => 'Tell us about your initial experience',
customStyles: {
backgroundColor: '#8b5cf6',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Immediate Reaction
// ============================================
const reactionSection = form.addSubform('reactionSection', {
title: 'Your First Reaction',
customStyles: () => {
const reaction = reactionSection.emojiRating('firstReaction')?.value();
if (reaction === 'excellent') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (reaction === 'good') return { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' };
if (reaction === 'neutral') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (reaction === 'bad' || reaction === 'very-bad') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
reactionSection.addRow(row => {
row.addTextPanel('reactionIntro', {
computedValue: () => 'Think back to your very first moment with us. What was your gut feeling?',
customStyles: {
textAlign: 'center',
padding: '8px 16px',
color: '#6b7280',
fontStyle: 'italic'
}
});
});
reactionSection.addRow(row => {
row.addEmojiRating('firstReaction', {
label: 'What was your initial reaction?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
reactionSection.addRow(row => {
row.addStarRating('overallImpression', {
label: 'Overall first impression',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 2: Sentiment Slider
// ============================================
const sentimentSection = form.addSubform('sentimentSection', {
title: 'Your Feelings',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
sentimentSection.addRow(row => {
row.addSlider('excitementLevel', {
label: 'How excited were you about what you saw?',
min: 0,
max: 100,
step: 10,
unit: '',
showValue: true,
defaultValue: 50
});
});
sentimentSection.addRow(row => {
row.addTextPanel('excitementLabel', {
computedValue: () => {
const level = sentimentSection.slider('excitementLevel')?.value();
if (level === null || level === undefined) return '';
if (level <= 20) return '😴 Not excited at all';
if (level <= 40) return '😐 Mildly interested';
if (level <= 60) return '🙂 Moderately excited';
if (level <= 80) return '😃 Very excited';
return '🤩 Absolutely thrilled!';
},
customStyles: () => {
const level = sentimentSection.slider('excitementLevel')?.value();
const baseStyles = { textAlign: 'center', padding: '8px', borderRadius: '4px' };
if (level && level >= 60) return { ...baseStyles, backgroundColor: '#d1fae5', color: '#065f46' };
if (level && level >= 40) return { ...baseStyles, backgroundColor: '#fef3c7', color: '#92400e' };
return { ...baseStyles, backgroundColor: '#fee2e2', color: '#991b1b' };
}
});
});
sentimentSection.addRow(row => {
row.addSlider('confidenceLevel', {
label: 'How confident are you that this is right for you?',
min: 0,
max: 100,
step: 10,
unit: '%',
showValue: true,
defaultValue: 50
});
});
// ============================================
// SECTION 3: Expectations vs Reality
// ============================================
const expectationsSection = form.addSubform('expectationsSection', {
title: 'Expectations vs Reality',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null
});
expectationsSection.addRow(row => {
row.addRatingScale('metExpectations', {
preset: 'likert-5',
label: 'How well did this meet your expectations?',
lowLabel: 'Far Below',
highLabel: 'Far Exceeded',
alignment: 'center'
});
});
expectationsSection.addRow(row => {
row.addTextPanel('expectationResult', {
computedValue: () => {
const met = expectationsSection.ratingScale('metExpectations')?.value();
if (met === null || met === undefined) return '';
if (met >= 5) return '🎉 Wow! We exceeded your expectations!';
if (met >= 4) return '😊 Great! We met or exceeded what you hoped for.';
if (met === 3) return '😐 We met your expectations - let\'s aim higher!';
if (met >= 2) return '😕 We fell a bit short. Tell us more.';
return '😞 We missed the mark. We want to understand why.';
},
customStyles: () => {
const met = expectationsSection.ratingScale('metExpectations')?.value();
const baseStyles = { textAlign: 'center', padding: '12px', borderRadius: '8px', fontWeight: 'bold' };
if (met && met >= 4) return { ...baseStyles, backgroundColor: '#d1fae5', color: '#065f46' };
if (met === 3) return { ...baseStyles, backgroundColor: '#fef3c7', color: '#92400e' };
if (met && met < 3) return { ...baseStyles, backgroundColor: '#fee2e2', color: '#991b1b' };
return { ...baseStyles, backgroundColor: '#f1f5f9', color: '#475569' };
},
isVisible: () => expectationsSection.ratingScale('metExpectations')?.value() !== null
});
});
// ============================================
// SECTION 4: What Stood Out (Positive)
// ============================================
const positiveSection = form.addSubform('positiveSection', {
title: 'What Impressed You?',
isVisible: () => {
const reaction = reactionSection.emojiRating('firstReaction')?.value();
return reaction !== null && ['good', 'excellent', 'neutral'].includes(reaction || '');
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
positiveSection.addRow(row => {
row.addSuggestionChips('positiveAspects', {
label: 'What caught your attention positively? (select up to 4)',
suggestions: [
{ id: 'design', name: 'Beautiful design' },
{ id: 'ease', name: 'Easy to use' },
{ id: 'fast', name: 'Fast & responsive' },
{ id: 'professional', name: 'Professional feel' },
{ id: 'innovative', name: 'Innovative approach' },
{ id: 'clear', name: 'Clear messaging' },
{ id: 'friendly', name: 'Friendly & welcoming' },
{ id: 'trustworthy', name: 'Trustworthy' },
{ id: 'unique', name: 'Unique experience' },
{ id: 'value', name: 'Great value' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 5: What Concerned You (Negative)
// ============================================
const negativeSection = form.addSubform('negativeSection', {
title: 'What Gave You Pause?',
isVisible: () => {
const reaction = reactionSection.emojiRating('firstReaction')?.value();
return reaction !== null && ['bad', 'very-bad', 'neutral'].includes(reaction || '');
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
negativeSection.addRow(row => {
row.addSuggestionChips('negativeAspects', {
label: 'What raised concerns?',
suggestions: [
{ id: 'confusing', name: 'Confusing' },
{ id: 'slow', name: 'Too slow' },
{ id: 'complex', name: 'Too complex' },
{ id: 'trust', name: 'Didn\'t feel trustworthy' },
{ id: 'value', name: 'Unsure of value' },
{ id: 'outdated', name: 'Felt outdated' },
{ id: 'cluttered', name: 'Too cluttered' },
{ id: 'expectations', name: 'Not what I expected' },
{ id: 'pricing', name: 'Pricing concerns' },
{ id: 'missing', name: 'Missing something key' }
],
alignment: 'center'
});
});
negativeSection.addSpacer();
negativeSection.addRow(row => {
row.addTextarea('concernDetails', {
label: 'Tell us more about your concerns',
placeholder: 'What specifically made you hesitate or feel uncertain?',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 6: Word Association
// ============================================
const wordsSection = form.addSubform('wordsSection', {
title: 'Quick Word Association',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null
});
wordsSection.addRow(row => {
row.addTextPanel('wordPrompt', {
computedValue: () => 'Pick the words that come to mind (select all that apply):',
customStyles: { textAlign: 'center', padding: '8px', color: '#6b7280' }
});
});
wordsSection.addRow(row => {
row.addCheckboxList('positiveWords', {
label: 'Positive associations',
options: [
{ id: 'modern', name: 'Modern' },
{ id: 'intuitive', name: 'Intuitive' },
{ id: 'helpful', name: 'Helpful' },
{ id: 'premium', name: 'Premium' },
{ id: 'friendly', name: 'Friendly' },
{ id: 'efficient', name: 'Efficient' }
],
orientation: 'horizontal'
}, '1fr');
row.addCheckboxList('negativeWords', {
label: 'Concerns',
options: [
{ id: 'overwhelming', name: 'Overwhelming' },
{ id: 'complicated', name: 'Complicated' },
{ id: 'basic', name: 'Basic' },
{ id: 'boring', name: 'Boring' },
{ id: 'impersonal', name: 'Impersonal' },
{ id: 'outdated', name: 'Outdated' }
],
orientation: 'horizontal'
}, '1fr');
});
// ============================================
// SECTION 7: Intent & Next Steps
// ============================================
const intentSection = form.addSubform('intentSection', {
title: 'What\'s Next?',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null
});
intentSection.addRow(row => {
row.addThumbRating('willContinue', {
label: 'Will you continue exploring?',
showLabels: true,
upLabel: 'Yes, definitely!',
downLabel: 'Probably not',
alignment: 'center',
size: 'lg'
});
});
intentSection.addRow(row => {
row.addThumbRating('wouldRecommend', {
label: 'Based on first impressions, would you tell a friend about us?',
showLabels: true,
upLabel: 'Yes!',
downLabel: 'Not yet',
alignment: 'center',
size: 'lg'
});
});
intentSection.addRow(row => {
row.addDropdown('referralSource', {
label: 'How did you first hear about us?',
options: [
{ id: 'search', name: 'Search engine' },
{ id: 'social', name: 'Social media' },
{ id: 'friend', name: 'Friend/colleague' },
{ id: 'ad', name: 'Advertisement' },
{ id: 'review', name: 'Online review' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select source'
});
});
// ============================================
// SECTION 8: Open Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Anything Else?',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('openFeedback', {
label: 'Share any other first impressions or suggestions',
placeholder: 'What else should we know about your initial experience?',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'First Impression Summary',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const reaction = reactionSection.emojiRating('firstReaction')?.value();
const stars = reactionSection.starRating('overallImpression')?.value();
const excitement = sentimentSection.slider('excitementLevel')?.value();
const confidence = sentimentSection.slider('confidenceLevel')?.value();
const expectations = expectationsSection.ratingScale('metExpectations')?.value();
const positives = positiveSection.suggestionChips('positiveAspects')?.value() || [];
const negatives = negativeSection.suggestionChips('negativeAspects')?.value() || [];
const willContinue = intentSection.thumbRating('willContinue')?.value();
const wouldRecommend = intentSection.thumbRating('wouldRecommend')?.value();
if (!reaction) return '';
const reactionLabels: Record<string, string> = {
'very-bad': '😡 Very Negative',
'bad': '😕 Negative',
'neutral': '😐 Neutral',
'good': '🙂 Positive',
'excellent': '😍 Very Positive'
};
let summary = `FIRST IMPRESSION\n`;
summary += `${'═'.repeat(25)}\n\n`;
summary += `Reaction: ${reactionLabels[reaction] || reaction}\n`;
if (stars) {
summary += `Overall: ${'★'.repeat(stars)}${'☆'.repeat(5 - stars)} (${stars}/5)\n`;
}
if (excitement !== null && excitement !== undefined) {
summary += `Excitement: ${excitement}%\n`;
}
if (confidence !== null && confidence !== undefined) {
summary += `Confidence: ${confidence}%\n`;
}
if (expectations) {
const expLabel = expectations >= 4 ? 'Exceeded' : expectations === 3 ? 'Met' : 'Below';
summary += `\nExpectations: ${expLabel}\n`;
}
if (positives.length > 0) {
summary += `\n✨ Positives: ${positives.length} noted\n`;
}
if (negatives.length > 0) {
summary += `⚠️ Concerns: ${negatives.length} raised\n`;
}
if (willContinue) {
summary += `\n${willContinue === 'up' ? '✅ Will continue' : '❌ May not continue'}\n`;
}
if (wouldRecommend) {
summary += `${wouldRecommend === 'up' ? '📣 Would recommend' : '🤐 Not yet'}`;
}
return summary;
},
customStyles: () => {
const reaction = reactionSection.emojiRating('firstReaction')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (reaction === 'excellent' || reaction === 'good') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (reaction === 'neutral') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (reaction === 'bad' || reaction === 'very-bad') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #8b5cf6' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit First Impressions',
isVisible: () => reactionSection.emojiRating('firstReaction')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Sharing!',
message: 'Your first impressions are incredibly valuable. They help us create better experiences for everyone who comes after you.'
});
}
Frequently Asked Questions
When should I show the first impression survey?
Trigger after the user completes their first meaningful action - signup, first purchase, first feature use, or first visit completion. Too early misses context; too late loses the 'first impression' moment. 5-15 minutes post-action is ideal.
Why focus on emotions rather than features?
First impressions are emotional, not rational. Users form gut reactions within seconds. Emoji ratings and sentiment sliders capture these feelings more accurately than feature-focused questions. Feature feedback comes later.
How do I use expectations vs reality data?
A large gap between expectations and reality signals messaging issues. If expectations are high but reality disappoints, your marketing overpromises. If reality exceeds expectations, highlight those surprises in marketing.
What's a good first impression score?
Aim for 70%+ positive first impressions (good/excellent emoji selections). Below 50% indicates serious onboarding issues. Track trends over time rather than absolute numbers - improvement matters most.
How does this differ from NPS?
First impression surveys capture immediate emotional reactions and are shown once, early in the journey. NPS measures considered loyalty and recommendation likelihood over time. Both are valuable at different stages.