export function airlineFeedbackSurvey(form: FormTs) {
// Airline Flight Experience Survey - Comprehensive Multi-Page Journey Feedback
// Demonstrates: Pages (multi-page wizard), MatrixQuestion, StarRating, EmojiRating, ThumbRating, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Flight Experience Survey',
computedValue: () => 'Help us improve your journey. Your feedback matters.',
customStyles: {
backgroundColor: '#0369a1',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE STRUCTURE
// ============================================
const pages = form.addPages('flightPages', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: Flight Details & Overall
// ============================================
const page1 = pages.addPage('details');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Page 1 of 4: Flight Details & First Impressions',
customStyles: {
backgroundColor: '#e0f2fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const flightDetailsSection = page1.addSubform('flightDetails', {
title: 'Flight Information',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
flightDetailsSection.addRow(row => {
row.addTextbox('flightNumber', {
label: 'Flight Number',
placeholder: 'e.g., AA1234',
maxLength: 10
}, '150px');
row.addDatepicker('flightDate', {
label: 'Flight Date',
maxDate: () => new Date().toISOString()
}, '200px');
row.addDropdown('cabinClass', {
label: 'Cabin Class',
options: [
{ id: 'economy', name: 'Economy' },
{ id: 'premium-economy', name: 'Premium Economy' },
{ id: 'business', name: 'Business' },
{ id: 'first', name: 'First Class' }
],
placeholder: 'Select class',
isRequired: true
}, '1fr');
});
flightDetailsSection.addRow(row => {
row.addTextbox('departure', {
label: 'Departure City/Airport',
placeholder: 'e.g., New York (JFK)'
}, '1fr');
row.addTextbox('arrival', {
label: 'Arrival City/Airport',
placeholder: 'e.g., Los Angeles (LAX)'
}, '1fr');
});
const overallSection = page1.addSubform('overallSection', {
title: 'Overall Impression'
});
overallSection.addRow(row => {
row.addEmojiRating('overallMood', {
label: 'How would you describe your overall flight experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall Flight Rating',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addThumbRating('onTimeArrival', {
label: 'Did your flight arrive on time?',
showLabels: true,
upLabel: 'Yes, on time',
downLabel: 'No, delayed',
alignment: 'left'
}, '1fr');
row.addDropdown('delayDuration', {
label: 'If delayed, how long?',
options: [
{ id: 'none', name: 'Not applicable' },
{ id: 'under-30', name: 'Under 30 minutes' },
{ id: '30-60', name: '30-60 minutes' },
{ id: '1-2h', name: '1-2 hours' },
{ id: '2-4h', name: '2-4 hours' },
{ id: 'over-4h', name: 'Over 4 hours' }
],
placeholder: 'Select',
isVisible: () => overallSection.thumbRating('onTimeArrival')?.value() === 'down'
}, '1fr');
});
page1.addRow(row => {
row.addEmpty('1fr');
row.addButton('next1', {
label: 'Next: Check-in & Boarding',
onClick: () => pages.goToPage('checkin')
});
});
// ============================================
// PAGE 2: Check-in & Boarding
// ============================================
const page2 = pages.addPage('checkin');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Page 2 of 4: Check-in & Boarding',
customStyles: {
backgroundColor: '#e0f2fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const checkinSection = page2.addSubform('checkinSection', {
title: 'Check-in Experience',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
checkinSection.addRow(row => {
row.addRadioButton('checkinMethod', {
label: 'How did you check in?',
options: [
{ id: 'online', name: 'Online / Mobile App' },
{ id: 'kiosk', name: 'Airport Kiosk' },
{ id: 'counter', name: 'Check-in Counter' }
],
orientation: 'horizontal',
isRequired: true
});
});
checkinSection.addRow(row => {
row.addMatrixQuestion('checkinRatings', {
label: 'Rate your check-in experience:',
rows: [
{ id: 'ease', label: 'Ease of check-in process', isRequired: true },
{ id: 'speed', label: 'Speed of check-in' },
{ id: 'staff', label: 'Staff helpfulness (if applicable)', allowDeselect: true },
{ id: 'bag-drop', label: 'Baggage drop experience', allowDeselect: true }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
const boardingSection = page2.addSubform('boardingSection', {
title: 'Boarding Experience'
});
boardingSection.addRow(row => {
row.addMatrixQuestion('boardingRatings', {
label: 'Rate the boarding process:',
rows: [
{ id: 'announcements', label: 'Clear announcements and communication', isRequired: true },
{ id: 'organization', label: 'Organized boarding process' },
{ id: 'timing', label: 'Boarding started on time' },
{ id: 'crew-welcome', label: 'Crew welcome and assistance' }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
boardingSection.addRow(row => {
row.addThumbRating('overheadSpace', {
label: 'Was there space for your carry-on luggage?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'left'
});
});
page2.addRow(row => {
row.addButton('back2', {
label: 'Back',
onClick: () => pages.goToPage('details')
});
row.addEmpty('1fr');
row.addButton('next2', {
label: 'Next: In-Flight Experience',
onClick: () => pages.goToPage('inflight')
});
});
// ============================================
// PAGE 3: In-Flight Experience
// ============================================
const page3 = pages.addPage('inflight');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Page 3 of 4: In-Flight Experience',
customStyles: {
backgroundColor: '#e0f2fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const cabinSection = page3.addSubform('cabinSection', {
title: 'Cabin Comfort',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
cabinSection.addRow(row => {
row.addMatrixQuestion('cabinRatings', {
label: 'Rate the cabin environment:',
rows: [
{ id: 'seat-comfort', label: 'Seat comfort', isRequired: true },
{ id: 'legroom', label: 'Legroom/space' },
{ id: 'cleanliness', label: 'Cabin cleanliness' },
{ id: 'temperature', label: 'Temperature control' },
{ id: 'noise', label: 'Noise level' },
{ id: 'lighting', label: 'Lighting' }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
const crewSection = page3.addSubform('crewSection', {
title: 'Cabin Crew'
});
crewSection.addRow(row => {
row.addStarRating('crewOverall', {
label: 'Overall cabin crew rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
crewSection.addRow(row => {
row.addSuggestionChips('crewHighlights', {
label: 'What did the crew do well? (Select up to 4)',
suggestions: [
{ id: 'friendly', name: 'Friendly & welcoming' },
{ id: 'attentive', name: 'Attentive service' },
{ id: 'professional', name: 'Professional' },
{ id: 'responsive', name: 'Quick to respond' },
{ id: 'helpful', name: 'Helpful with requests' },
{ id: 'safety', name: 'Clear safety info' },
{ id: 'problem-solving', name: 'Good problem solving' },
{ id: 'multilingual', name: 'Multilingual support' }
],
max: 4,
alignment: 'center'
});
});
const foodSection = page3.addSubform('foodSection', {
title: 'Food & Beverages'
});
foodSection.addRow(row => {
row.addThumbRating('foodServed', {
label: 'Was food/beverages served on your flight?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No'
});
});
foodSection.addRow(row => {
row.addMatrixQuestion('foodRatings', {
label: 'Rate the food and beverage service:',
rows: [
{ id: 'quality', label: 'Food quality/taste' },
{ id: 'variety', label: 'Menu variety' },
{ id: 'presentation', label: 'Presentation' },
{ id: 'service-timing', label: 'Service timing' },
{ id: 'beverage', label: 'Beverage selection' }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true,
isVisible: () => foodSection.thumbRating('foodServed')?.value() === 'up'
});
});
const entertainmentSection = page3.addSubform('entertainmentSection', {
title: 'Entertainment & Connectivity'
});
entertainmentSection.addRow(row => {
row.addCheckboxList('entertainmentUsed', {
label: 'Which entertainment options did you use?',
options: [
{ id: 'ife', name: 'Seatback entertainment screen' },
{ id: 'wifi', name: 'In-flight WiFi' },
{ id: 'streaming', name: 'Streaming to my device' },
{ id: 'reading', name: 'Magazines/newspapers' },
{ id: 'none', name: 'None' }
],
orientation: 'vertical'
});
});
entertainmentSection.addRow(row => {
row.addStarRating('entertainmentRating', {
label: 'Rate the entertainment options',
maxStars: 5,
alignment: 'center',
isVisible: () => {
const used = entertainmentSection.checkboxList('entertainmentUsed')?.value() || [];
return used.length > 0 && !used.includes('none');
}
});
});
page3.addRow(row => {
row.addButton('back3', {
label: 'Back',
onClick: () => pages.goToPage('checkin')
});
row.addEmpty('1fr');
row.addButton('next3', {
label: 'Next: Arrival & Summary',
onClick: () => pages.goToPage('arrival')
});
});
// ============================================
// PAGE 4: Arrival & Final Thoughts
// ============================================
const page4 = pages.addPage('arrival');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Page 4 of 4: Arrival & Final Thoughts',
customStyles: {
backgroundColor: '#e0f2fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const arrivalSection = page4.addSubform('arrivalSection', {
title: 'Arrival Experience',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
arrivalSection.addRow(row => {
row.addMatrixQuestion('arrivalRatings', {
label: 'Rate your arrival experience:',
rows: [
{ id: 'landing', label: 'Smooth landing', isRequired: true },
{ id: 'deboarding', label: 'Efficient deboarding' },
{ id: 'announcements', label: 'Helpful arrival announcements' }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
arrivalSection.addRow(row => {
row.addThumbRating('baggageOnTime', {
label: 'Did your checked baggage arrive promptly and undamaged?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
isVisible: () => {
// Show only if they might have checked bags (not quick trip)
return true;
}
}, '1fr');
row.addEmpty('1fr');
});
const recommendSection = page4.addSubform('recommendSection', {
title: 'Would You Fly With Us Again?',
customStyles: () => {
const nps = recommendSection.ratingScale('flightNPS')?.npsCategory();
if (nps === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (nps === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (nps === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
recommendSection.addRow(row => {
row.addRatingScale('flightNPS', {
preset: 'nps',
label: 'How likely are you to recommend this airline to friends or colleagues?',
showSegmentColors: true,
showCategoryLabel: true,
showConfettiOnPromoter: true,
alignment: 'center'
});
});
recommendSection.addRow(row => {
row.addTextarea('npsReason', {
label: () => {
const category = recommendSection.ratingScale('flightNPS')?.npsCategory();
if (category === 'promoter') return 'What made this flight exceptional?';
if (category === 'detractor') return 'What would need to improve?';
return 'What could we do better?';
},
placeholder: 'Share your thoughts...',
rows: 2,
autoExpand: true,
isVisible: () => recommendSection.ratingScale('flightNPS')?.value() !== null
});
});
const commentsSection = page4.addSubform('commentsSection', {
title: 'Additional Comments'
});
commentsSection.addRow(row => {
row.addSuggestionChips('flightHighlights', {
label: 'What were the highlights of your flight?',
suggestions: [
{ id: 'crew', name: 'Excellent crew' },
{ id: 'comfort', name: 'Comfortable seats' },
{ id: 'food', name: 'Great food' },
{ id: 'entertainment', name: 'Entertainment' },
{ id: 'punctual', name: 'On-time flight' },
{ id: 'boarding', name: 'Smooth boarding' },
{ id: 'value', name: 'Good value' },
{ id: 'none', name: 'Nothing special' }
],
max: 3,
alignment: 'center'
});
});
commentsSection.addSpacer();
commentsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other comments or suggestions?',
placeholder: 'Tell us about your experience...',
rows: 3,
autoExpand: true
});
});
// Summary section
const summarySection = page4.addSubform('summarySection', {
title: 'Flight Feedback Summary',
isVisible: () => recommendSection.ratingScale('flightNPS')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overallRating = overallSection.starRating('overallRating')?.value();
const crewRating = crewSection.starRating('crewOverall')?.value();
const nps = recommendSection.ratingScale('flightNPS')?.value();
const npsCategory = recommendSection.ratingScale('flightNPS')?.npsCategory();
const onTime = overallSection.thumbRating('onTimeArrival')?.value();
const cabinClass = flightDetailsSection.dropdown('cabinClass')?.value();
if (!overallRating) return '';
const classLabels: Record<string, string> = {
'economy': 'Economy',
'premium-economy': 'Premium Economy',
'business': 'Business',
'first': 'First Class'
};
let emoji = '';
if (npsCategory === 'promoter') emoji = '✈️';
else if (npsCategory === 'passive') emoji = '🛫';
else emoji = '⚠️';
let summary = `${emoji} FLIGHT FEEDBACK SUMMARY\n`;
summary += `${'═'.repeat(30)}\n\n`;
if (cabinClass) {
summary += `Class: ${classLabels[cabinClass] || cabinClass}\n`;
}
summary += `On-time: ${onTime === 'up' ? 'Yes ✓' : onTime === 'down' ? 'No ✗' : 'N/A'}\n\n`;
summary += `Overall: ${'★'.repeat(overallRating)}${'☆'.repeat(5 - overallRating)} (${overallRating}/5)\n`;
if (crewRating) {
summary += `Crew: ${'★'.repeat(crewRating)}${'☆'.repeat(5 - crewRating)} (${crewRating}/5)\n`;
}
if (nps !== null && nps !== undefined) {
const categoryLabel = npsCategory ? npsCategory.charAt(0).toUpperCase() + npsCategory.slice(1) : '';
summary += `\nNPS: ${nps}/10 (${categoryLabel})`;
}
return summary;
},
customStyles: () => {
const nps = recommendSection.ratingScale('flightNPS')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (nps === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (nps === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (nps === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#e0f2fe', borderLeft: '4px solid #0369a1' };
}
});
});
page4.addRow(row => {
row.addButton('back4', {
label: 'Back',
onClick: () => pages.goToPage('inflight')
});
row.addEmpty('1fr');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Flight Feedback',
isVisible: () => {
const currentPage = pages.currentPageIndex();
return currentPage === 3; // Show only on last page
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your feedback helps us improve every flight. We appreciate you taking the time to share your experience. Safe travels!'
});
}