Size & Fit Feedback Form
Clothing returns due to sizing issues cost retailers billions annually. This form collects detailed fit feedback using visual scales, body measurement comparisons, and specific fit attributes. The data helps improve size charts, provides social proof for future buyers, and identifies products with consistent sizing issues. Perfect for fashion retailers, shoe stores, and any apparel e-commerce.
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
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
export function sizeFitFeedback(form: FormTs) {
// Size & Fit Feedback Form - Collecting sizing data to reduce returns
// Demonstrates: RatingScale (custom), MatrixQuestion, RadioButton, Slider, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'How Does It Fit?',
computedValue: () => 'Help other shoppers find their perfect size!',
customStyles: {
background: 'linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Product & Order Info
// ============================================
const orderSection = form.addSubform('order', {
title: 'Your Order'
});
orderSection.addRow(row => {
row.addDropdown('productCategory', {
label: 'What type of item is this?',
placeholder: 'Select category',
options: [
{ id: 'tops', name: 'Tops (shirts, blouses, sweaters)' },
{ id: 'bottoms', name: 'Bottoms (pants, jeans, skirts)' },
{ id: 'dresses', name: 'Dresses & Jumpsuits' },
{ id: 'outerwear', name: 'Outerwear (jackets, coats)' },
{ id: 'shoes', name: 'Shoes & Footwear' },
{ id: 'activewear', name: 'Activewear & Sportswear' }
],
isRequired: true
}, '1fr');
row.addDropdown('sizeOrdered', {
label: 'What size did you order?',
placeholder: 'Select size',
options: [
{ id: 'xxs', name: 'XXS' },
{ id: 'xs', name: 'XS' },
{ id: 's', name: 'S' },
{ id: 'm', name: 'M' },
{ id: 'l', name: 'L' },
{ id: 'xl', name: 'XL' },
{ id: 'xxl', name: 'XXL' },
{ id: '3xl', name: '3XL+' }
],
isRequired: true
}, '1fr');
});
orderSection.addRow(row => {
row.addDropdown('usualSize', {
label: 'What size do you usually wear in this category?',
placeholder: 'Your usual size',
options: [
{ id: 'xxs', name: 'XXS' },
{ id: 'xs', name: 'XS' },
{ id: 's', name: 'S' },
{ id: 'm', name: 'M' },
{ id: 'l', name: 'L' },
{ id: 'xl', name: 'XL' },
{ id: 'xxl', name: 'XXL' },
{ id: '3xl', name: '3XL+' }
]
}, '1fr');
row.addDropdown('bodyType', {
label: 'How would you describe your body type?',
placeholder: 'Select body type',
options: [
{ id: 'petite', name: 'Petite' },
{ id: 'average', name: 'Average' },
{ id: 'tall', name: 'Tall' },
{ id: 'athletic', name: 'Athletic' },
{ id: 'curvy', name: 'Curvy' },
{ id: 'plus', name: 'Plus size' }
]
}, '1fr');
});
// ============================================
// SECTION 2: Overall Fit Assessment
// ============================================
const overallFitSection = form.addSubform('overallFit', {
title: 'Overall Fit',
isVisible: () => !!orderSection.dropdown('sizeOrdered')?.value()
});
overallFitSection.addRow(row => {
row.addRatingScale('overallFitScale', {
label: 'How does this item fit overall?',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Much too small',
highLabel: 'Much too large',
variant: 'segmented',
size: 'lg',
alignment: 'center',
isRequired: true
});
});
overallFitSection.addRow(row => {
row.addTextPanel('fitLabel', {
computedValue: () => {
const fit = overallFitSection.ratingScale('overallFitScale')?.value();
if (fit === 1) return '👕 Runs Very Small - Order 2 sizes up';
if (fit === 2) return '👕 Runs Small - Order 1 size up';
if (fit === 3) return '✅ True to Size';
if (fit === 4) return '👕 Runs Large - Order 1 size down';
if (fit === 5) return '👕 Runs Very Large - Order 2 sizes down';
return '';
},
customStyles: () => {
const fit = overallFitSection.ratingScale('overallFitScale')?.value();
if (!fit) return { display: 'none' };
const color = fit === 3 ? '#10b981' :
(fit === 2 || fit === 4) ? '#f59e0b' : '#ef4444';
return {
textAlign: 'center',
padding: '12px',
backgroundColor: fit === 3 ? '#d1fae5' :
(fit === 2 || fit === 4) ? '#fef3c7' : '#fee2e2',
borderRadius: '8px',
fontWeight: '600',
color: color
};
},
isVisible: () => overallFitSection.ratingScale('overallFitScale')?.value() !== null
});
});
overallFitSection.addRow(row => {
row.addRadioButton('wouldKeep', {
label: 'Will you keep this item?',
options: [
{ id: 'yes', name: 'Yes, keeping it' },
{ id: 'exchange', name: 'Exchanging for different size' },
{ id: 'return', name: 'Returning it' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 3: Detailed Fit by Area (for Clothing)
// ============================================
const detailedFitSection = form.addSubform('detailedFit', {
title: 'Fit Details',
isVisible: () => {
const category = orderSection.dropdown('productCategory')?.value();
return category !== 'shoes' && !!category;
}
});
// For Tops
detailedFitSection.addRow(row => {
row.addMatrixQuestion('topsFit', {
label: 'How does this top fit in each area?',
rows: [
{ id: 'shoulders', label: 'Shoulders' },
{ id: 'bust', label: 'Bust/Chest' },
{ id: 'waist', label: 'Waist' },
{ id: 'length', label: 'Length' },
{ id: 'sleeves', label: 'Sleeve Length' }
],
columns: [
{ id: 'too-small', label: 'Too Small' },
{ id: 'slightly-small', label: 'Slightly Small' },
{ id: 'perfect', label: 'Perfect' },
{ id: 'slightly-large', label: 'Slightly Large' },
{ id: 'too-large', label: 'Too Large' }
],
fullWidth: true,
isVisible: () => orderSection.dropdown('productCategory')?.value() === 'tops'
});
});
// For Bottoms
detailedFitSection.addRow(row => {
row.addMatrixQuestion('bottomsFit', {
label: 'How do these bottoms fit in each area?',
rows: [
{ id: 'waist', label: 'Waist' },
{ id: 'hips', label: 'Hips' },
{ id: 'thighs', label: 'Thighs' },
{ id: 'inseam', label: 'Inseam/Length' },
{ id: 'rise', label: 'Rise' }
],
columns: [
{ id: 'too-small', label: 'Too Tight' },
{ id: 'slightly-small', label: 'Slightly Tight' },
{ id: 'perfect', label: 'Perfect' },
{ id: 'slightly-large', label: 'Slightly Loose' },
{ id: 'too-large', label: 'Too Loose' }
],
fullWidth: true,
isVisible: () => orderSection.dropdown('productCategory')?.value() === 'bottoms'
});
});
// For Dresses
detailedFitSection.addRow(row => {
row.addMatrixQuestion('dressFit', {
label: 'How does this dress fit in each area?',
rows: [
{ id: 'bust', label: 'Bust' },
{ id: 'waist', label: 'Waist' },
{ id: 'hips', label: 'Hips' },
{ id: 'length', label: 'Length' }
],
columns: [
{ id: 'too-small', label: 'Too Tight' },
{ id: 'slightly-small', label: 'Slightly Tight' },
{ id: 'perfect', label: 'Perfect' },
{ id: 'slightly-large', label: 'Slightly Loose' },
{ id: 'too-large', label: 'Too Loose' }
],
fullWidth: true,
isVisible: () => orderSection.dropdown('productCategory')?.value() === 'dresses'
});
});
// For Outerwear
detailedFitSection.addRow(row => {
row.addMatrixQuestion('outerwearFit', {
label: 'How does this outerwear fit?',
rows: [
{ id: 'shoulders', label: 'Shoulders' },
{ id: 'chest', label: 'Chest' },
{ id: 'arms', label: 'Arms' },
{ id: 'length', label: 'Length' }
],
columns: [
{ id: 'too-small', label: 'Too Tight' },
{ id: 'slightly-small', label: 'Slightly Tight' },
{ id: 'perfect', label: 'Perfect' },
{ id: 'slightly-large', label: 'Slightly Loose' },
{ id: 'too-large', label: 'Too Loose' }
],
fullWidth: true,
isVisible: () => orderSection.dropdown('productCategory')?.value() === 'outerwear'
});
});
// For Activewear
detailedFitSection.addRow(row => {
row.addMatrixQuestion('activewearFit', {
label: 'How does this activewear fit?',
rows: [
{ id: 'stretch', label: 'Stretch/Flexibility' },
{ id: 'compression', label: 'Compression Level' },
{ id: 'coverage', label: 'Coverage' },
{ id: 'waistband', label: 'Waistband' }
],
columns: [
{ id: 'too-tight', label: 'Too Tight' },
{ id: 'good-compression', label: 'Good Compression' },
{ id: 'just-right', label: 'Just Right' },
{ id: 'relaxed', label: 'Relaxed Fit' },
{ id: 'too-loose', label: 'Too Loose' }
],
fullWidth: true,
isVisible: () => orderSection.dropdown('productCategory')?.value() === 'activewear'
});
});
// ============================================
// SECTION 4: Shoe Fit (for Footwear)
// ============================================
const shoeFitSection = form.addSubform('shoeFit', {
title: 'Shoe Fit Details',
isVisible: () => orderSection.dropdown('productCategory')?.value() === 'shoes'
});
shoeFitSection.addRow(row => {
row.addRatingScale('shoeWidth', {
label: 'How is the width?',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Too narrow',
highLabel: 'Too wide',
variant: 'segmented',
alignment: 'center'
});
});
shoeFitSection.addRow(row => {
row.addRatingScale('toeRoom', {
label: 'How is the toe room?',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Too cramped',
highLabel: 'Too much room',
variant: 'segmented',
alignment: 'center'
});
});
shoeFitSection.addRow(row => {
row.addRatingScale('archSupport', {
label: 'How is the arch support?',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Not enough',
highLabel: 'Too much',
variant: 'segmented',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Quality & Comfort
// ============================================
const qualitySection = form.addSubform('quality', {
title: 'Quality & Comfort',
isVisible: () => !!overallFitSection.ratingScale('overallFitScale')?.value()
});
qualitySection.addRow(row => {
row.addStarRating('fabricQuality', {
label: 'How would you rate the fabric/material quality?',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('comfort', {
label: 'How comfortable is this item?',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
qualitySection.addRow(row => {
row.addCheckboxList('qualityNotes', {
label: 'Any quality observations?',
options: [
{ id: 'soft', name: 'Soft and comfortable' },
{ id: 'stretchy', name: 'Good stretch' },
{ id: 'stiff', name: 'Stiff/needs breaking in' },
{ id: 'thin', name: 'Thinner than expected' },
{ id: 'thick', name: 'Thicker than expected' },
{ id: 'itchy', name: 'Scratchy/itchy' }
]
});
});
// ============================================
// SECTION 6: Recommendation
// ============================================
const recommendSection = form.addSubform('recommend', {
title: 'Your Recommendation',
isVisible: () => !!qualitySection.starRating('fabricQuality')?.value()
});
recommendSection.addRow(row => {
row.addRadioButton('sizeRecommendation', {
label: 'What would you recommend to other shoppers?',
options: [
{ id: 'size-down-2', name: 'Order 2 sizes down' },
{ id: 'size-down-1', name: 'Order 1 size down' },
{ id: 'true-to-size', name: 'Order your usual size' },
{ id: 'size-up-1', name: 'Order 1 size up' },
{ id: 'size-up-2', name: 'Order 2 sizes up' }
],
isRequired: true
});
});
recommendSection.addSpacer();
recommendSection.addRow(row => {
row.addTextarea('fitNotes', {
label: 'Any tips for future buyers about sizing or fit?',
placeholder: 'e.g., "I\'m 5\'6" and the medium was perfect length" or "Runs tight in the shoulders"',
rows: 3
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Fit Feedback',
isVisible: () => !!recommendSection.radioButton('sizeRecommendation')?.value()
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const category = orderSection.dropdown('productCategory')?.value();
const sizeOrdered = orderSection.dropdown('sizeOrdered')?.value();
const overallFit = overallFitSection.ratingScale('overallFitScale')?.value();
const wouldKeep = overallFitSection.radioButton('wouldKeep')?.value();
const fabricQuality = qualitySection.starRating('fabricQuality')?.value();
const comfort = qualitySection.starRating('comfort')?.value();
const recommendation = recommendSection.radioButton('sizeRecommendation')?.value();
if (!overallFit) return '';
const fitLabels: Record<number, string> = {
1: 'Much too small',
2: 'Slightly small',
3: 'True to size',
4: 'Slightly large',
5: 'Much too large'
};
const recLabels: Record<string, string> = {
'size-down-2': 'Order 2 sizes down',
'size-down-1': 'Order 1 size down',
'true-to-size': 'Order usual size',
'size-up-1': 'Order 1 size up',
'size-up-2': 'Order 2 sizes up'
};
let summary = '👕 Fit Feedback Summary\n';
summary += '═'.repeat(25) + '\n\n';
if (category && sizeOrdered) {
summary += `Category: ${category.charAt(0).toUpperCase() + category.slice(1)}\n`;
summary += `Size Ordered: ${sizeOrdered.toUpperCase()}\n`;
}
summary += `Overall Fit: ${fitLabels[overallFit]}\n`;
if (wouldKeep) {
const keepLabels: Record<string, string> = {
'yes': 'Keeping',
'exchange': 'Exchanging',
'return': 'Returning'
};
summary += `Decision: ${keepLabels[wouldKeep]}\n`;
}
if (fabricQuality || comfort) {
summary += '\n';
if (fabricQuality) summary += `Quality: ${'⭐'.repeat(fabricQuality)}\n`;
if (comfort) summary += `Comfort: ${'⭐'.repeat(comfort)}\n`;
}
if (recommendation) {
summary += `\n📏 Recommendation: ${recLabels[recommendation]}`;
}
return summary;
},
customStyles: () => {
const overallFit = overallFitSection.ratingScale('overallFitScale')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (overallFit === 3) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (overallFit === 2 || overallFit === 4) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Fit Feedback',
isVisible: () => !!recommendSection.radioButton('sizeRecommendation')?.value()
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You!',
message: 'Your fit feedback helps other shoppers find their perfect size. We appreciate you taking the time to share your experience!'
});
}
Frequently Asked Questions
How does this help reduce returns?
By collecting fit data from actual buyers, you can show future customers how items run (small/large), recommend sizes based on body type, and identify products with consistent fit issues to address with suppliers.
Can I show this feedback on product pages?
Yes! Aggregate responses like '85% say true to size' or 'Runs small, order one size up' are powerful for helping customers choose the right size before purchasing.
What about privacy concerns with body measurements?
The form collects relative fit feedback (too tight/too loose) rather than exact measurements. All data can be aggregated anonymously for size recommendations.
Should I ask about all body areas?
Customize based on product type. Tops need bust/waist/length. Pants need waist/hips/inseam. Shoes need width and toe room. Tailor the form to your products.
How do I use the 'usual size' data?
Compare customers' usual sizes with what they ordered and their fit feedback. This helps identify if your sizing runs differently from industry standards.