export function testDriveFeedback(form: FormTs) {
// Test Drive Experience Survey - Automotive dealership feedback
// Demonstrates: MatrixQuestion, StarRating, RatingScale, EmojiRating, Slider, SuggestionChips, multi-column layout
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Test Drive Feedback',
computedValue: () => 'Tell us about your test drive experience',
customStyles: {
backgroundColor: '#1e40af',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Vehicle Information
// ============================================
const vehicleSection = form.addSubform('vehicleSection', {
title: 'Vehicle Details',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
vehicleSection.addRow(row => {
row.addDropdown('vehicleMake', {
label: 'Vehicle Make',
options: [
{ id: 'ford', name: 'Ford' },
{ id: 'chevrolet', name: 'Chevrolet' },
{ id: 'toyota', name: 'Toyota' },
{ id: 'honda', name: 'Honda' },
{ id: 'nissan', name: 'Nissan' },
{ id: 'bmw', name: 'BMW' },
{ id: 'mercedes', name: 'Mercedes-Benz' },
{ id: 'audi', name: 'Audi' },
{ id: 'hyundai', name: 'Hyundai' },
{ id: 'kia', name: 'Kia' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select make',
isRequired: true
}, '1fr');
row.addTextbox('vehicleModel', {
label: 'Vehicle Model',
placeholder: 'e.g., Camry, F-150, Accord',
isRequired: true
}, '1fr');
row.addTextbox('vehicleYear', {
label: 'Year',
placeholder: 'e.g., 2024',
pattern: '^[0-9]{4}$'
}, '100px');
});
vehicleSection.addRow(row => {
row.addDropdown('vehicleType', {
label: 'Vehicle Type',
options: [
{ id: 'sedan', name: 'Sedan' },
{ id: 'suv', name: 'SUV / Crossover' },
{ id: 'truck', name: 'Truck' },
{ id: 'coupe', name: 'Coupe' },
{ id: 'hatchback', name: 'Hatchback' },
{ id: 'minivan', name: 'Minivan' },
{ id: 'convertible', name: 'Convertible' },
{ id: 'electric', name: 'Electric Vehicle' },
{ id: 'hybrid', name: 'Hybrid' }
],
placeholder: 'Select type'
}, '1fr');
row.addRadioButton('newUsed', {
label: 'Condition',
options: [
{ id: 'new', name: 'New' },
{ id: 'used', name: 'Pre-owned' },
{ id: 'certified', name: 'Certified Pre-Owned' }
],
orientation: 'horizontal'
}, '1fr');
});
// ============================================
// SECTION 2: Overall Impression
// ============================================
const impressionSection = form.addSubform('impressionSection', {
title: 'First Impressions',
customStyles: () => {
const rating = impressionSection.starRating('overallImpression')?.value();
if (rating !== null && rating !== undefined) {
if (rating >= 4) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (rating >= 3) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
return { padding: '16px', borderRadius: '8px', border: '1px dashed #1e40af' };
}
});
impressionSection.addRow(row => {
row.addStarRating('overallImpression', {
label: 'Overall impression of the vehicle',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
impressionSection.addRow(row => {
row.addEmojiRating('drivingFeeling', {
label: 'How did you feel while driving?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Vehicle Ratings
// ============================================
const ratingsSection = form.addSubform('ratingsSection', {
title: 'Vehicle Performance & Features',
isVisible: () => impressionSection.starRating('overallImpression')?.value() !== null
});
ratingsSection.addRow(row => {
row.addMatrixQuestion('vehicleRatings', {
label: 'Rate the following aspects of the vehicle:',
rows: [
{ id: 'handling', label: 'Handling & Steering', description: 'How the car responds to your input', isRequired: true },
{ id: 'acceleration', label: 'Acceleration & Power', description: 'Engine performance', isRequired: true },
{ id: 'braking', label: 'Braking', description: 'Stopping power and feel', isRequired: false },
{ id: 'comfort', label: 'Ride Comfort', description: 'Smoothness and noise level', isRequired: true },
{ id: 'visibility', label: 'Visibility', description: 'How well you can see', isRequired: false },
{ id: 'interior', label: 'Interior Quality', description: 'Materials and build quality', isRequired: false }
],
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
});
});
// Individual star ratings for key features
const featuresSection = ratingsSection.addSubform('featuresSection', {
title: 'Key Features'
});
featuresSection.addRow(row => {
row.addStarRating('techFeatures', {
label: 'Technology & Infotainment',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('safetyFeatures', {
label: 'Safety Features',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
featuresSection.addRow(row => {
row.addStarRating('spaceStorage', {
label: 'Space & Storage',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('fuelEfficiency', {
label: () => {
const type = vehicleSection.dropdown('vehicleType')?.value();
return type === 'electric' ? 'Range / Charging' : 'Fuel Efficiency (expected)';
},
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
// What stood out
ratingsSection.addRow(row => {
row.addSuggestionChips('standoutFeatures', {
label: 'What stood out to you? (select up to 4)',
suggestions: [
{ id: 'power', name: 'Power & Speed' },
{ id: 'smooth', name: 'Smooth ride' },
{ id: 'quiet', name: 'Quiet cabin' },
{ id: 'tech', name: 'Technology' },
{ id: 'space', name: 'Spacious' },
{ id: 'style', name: 'Style & Design' },
{ id: 'comfort', name: 'Comfortable seats' },
{ id: 'handling', name: 'Great handling' },
{ id: 'visibility', name: 'Good visibility' },
{ id: 'safety', name: 'Safety features' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 4: Salesperson Experience
// ============================================
const salesSection = form.addSubform('salesSection', {
title: 'Your Sales Consultant',
isVisible: () => impressionSection.starRating('overallImpression')?.value() !== null
});
salesSection.addRow(row => {
row.addTextbox('salespersonName', {
label: 'Salesperson name (if known)',
placeholder: 'e.g., John Smith'
});
});
salesSection.addRow(row => {
row.addMatrixQuestion('salesRatings', {
label: 'Rate your salesperson:',
rows: [
{ id: 'knowledge', label: 'Product Knowledge', description: 'Understanding of the vehicle', isRequired: true },
{ id: 'helpfulness', label: 'Helpfulness', description: 'Answered your questions', isRequired: true },
{ id: 'pressure', label: 'No-Pressure Approach', description: 'Comfortable, not pushy', isRequired: true },
{ id: 'professionalism', label: 'Professionalism', description: 'Courtesy and respect', isRequired: false }
],
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
});
});
salesSection.addRow(row => {
row.addStarRating('overallSalesperson', {
label: 'Overall salesperson rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Purchase Intent
// ============================================
const intentSection = form.addSubform('intentSection', {
title: 'Next Steps',
isVisible: () => impressionSection.starRating('overallImpression')?.value() !== null,
customStyles: () => {
const intent = intentSection.radioButton('purchaseIntent')?.value();
if (intent === 'ready') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (intent === 'considering') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (intent === 'not-now') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
intentSection.addRow(row => {
row.addRadioButton('purchaseIntent', {
label: 'How likely are you to purchase this vehicle?',
options: [
{ id: 'ready', name: "Ready to buy - let's talk numbers" },
{ id: 'considering', name: 'Strongly considering - need more time' },
{ id: 'comparing', name: 'Still comparing options' },
{ id: 'not-now', name: 'Not looking to buy right now' }
],
orientation: 'vertical',
isRequired: true
});
});
// Follow-up for considering/comparing
intentSection.addRow(row => {
row.addCheckboxList('whatNeeded', {
label: 'What would help you make a decision?',
options: [
{ id: 'pricing', name: 'Detailed pricing/financing options' },
{ id: 'compare', name: 'Comparison with other models' },
{ id: 'another-drive', name: 'Another test drive' },
{ id: 'family', name: 'Discuss with family/partner' },
{ id: 'trade', name: 'Trade-in valuation' },
{ id: 'research', name: 'More research/reviews' }
],
orientation: 'vertical',
isVisible: () => {
const intent = intentSection.radioButton('purchaseIntent')?.value();
return intent === 'considering' || intent === 'comparing';
}
});
});
// Slider for purchase timeline
intentSection.addRow(row => {
row.addSlider('purchaseTimeline', {
label: 'When are you looking to purchase? (months)',
min: 0,
max: 12,
step: 1,
showValue: true,
unit: 'mo',
defaultValue: 3,
isVisible: () => {
const intent = intentSection.radioButton('purchaseIntent')?.value();
return intent !== 'not-now' && intent !== null;
}
});
});
// Not interested follow-up
intentSection.addRow(row => {
row.addCheckboxList('notInterestedReasons', {
label: 'What are your concerns?',
options: [
{ id: 'price', name: 'Price too high' },
{ id: 'not-right', name: 'Not the right vehicle for me' },
{ id: 'features', name: 'Missing features I need' },
{ id: 'performance', name: "Performance didn't meet expectations" },
{ id: 'timing', name: 'Bad timing / not ready' },
{ id: 'competitor', name: 'Prefer a competitor' }
],
orientation: 'vertical',
isVisible: () => intentSection.radioButton('purchaseIntent')?.value() === 'not-now'
});
});
// ============================================
// SECTION 6: Recommendation & NPS
// ============================================
const npsSection = form.addSubform('npsSection', {
title: 'Would You Recommend Us?',
isVisible: () => impressionSection.starRating('overallImpression')?.value() !== null,
customStyles: () => {
const nps = npsSection.ratingScale('dealershipNPS')?.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' };
}
});
npsSection.addRow(row => {
row.addRatingScale('dealershipNPS', {
preset: 'nps',
label: 'How likely are you to recommend our dealership to friends?',
showSegmentColors: true,
showCategoryLabel: true,
showConfettiOnPromoter: true,
alignment: 'center'
});
});
npsSection.addSpacer();
npsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback about your test drive experience?',
placeholder: 'Share your thoughts...',
rows: 3,
autoExpand: true
});
});
// Contact preferences
const contactSection = npsSection.addSubform('contactSection', {
isVisible: () => {
const intent = intentSection.radioButton('purchaseIntent')?.value();
return intent === 'ready' || intent === 'considering';
}
});
contactSection.addRow(row => {
row.addCheckbox('followUp', {
label: 'Yes, please follow up with me about this vehicle'
});
});
contactSection.addRow(row => {
row.addEmail('email', {
label: 'Email',
placeholder: 'your@email.com',
isVisible: () => contactSection.checkbox('followUp')?.value() === true
}, '1fr');
row.addTextbox('phone', {
label: 'Phone',
placeholder: '(555) 123-4567',
isVisible: () => contactSection.checkbox('followUp')?.value() === true
}, '1fr');
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => impressionSection.starRating('overallImpression')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const make = vehicleSection.dropdown('vehicleMake')?.value();
const model = vehicleSection.textbox('vehicleModel')?.value();
const overall = impressionSection.starRating('overallImpression')?.value();
const salesperson = salesSection.starRating('overallSalesperson')?.value();
const intent = intentSection.radioButton('purchaseIntent')?.value();
const nps = npsSection.ratingScale('dealershipNPS')?.npsCategory();
const timeline = intentSection.slider('purchaseTimeline')?.value();
const standout = ratingsSection.suggestionChips('standoutFeatures')?.value() || [];
if (!overall) return '';
const intentLabels: Record<string, string> = {
'ready': '🔥 Ready to buy',
'considering': '🤔 Considering',
'comparing': '⚖️ Comparing options',
'not-now': '❌ Not now'
};
let summary = `🚗 TEST DRIVE FEEDBACK\n`;
summary += `${'═'.repeat(28)}\n\n`;
if (make || model) {
summary += `Vehicle: ${make?.toUpperCase() || ''} ${model || ''}\n`;
}
summary += `Impression: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)} (${overall}/5)\n`;
if (salesperson) {
summary += `Salesperson: ${'★'.repeat(salesperson)}${'☆'.repeat(5 - salesperson)} (${salesperson}/5)\n`;
}
if (standout.length > 0) {
summary += `\n✨ Standout features: ${standout.length}`;
}
if (intent) {
summary += `\n\n${intentLabels[intent]}`;
if (timeline !== null && timeline !== undefined && intent !== 'not-now') {
summary += `\nTimeline: ${timeline} months`;
}
}
if (nps) {
summary += `\n\nNPS: ${nps.charAt(0).toUpperCase() + nps.slice(1)}`;
}
return summary;
},
customStyles: () => {
const intent = intentSection.radioButton('purchaseIntent')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (intent === 'ready') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (intent === 'considering') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (intent === 'not-now') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#dbeafe', borderLeft: '4px solid #1e40af' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => impressionSection.starRating('overallImpression')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'We appreciate you taking the time to share your test drive experience. Your feedback helps us serve you better. If you requested follow-up, a member of our team will be in touch soon!'
});
}