export function itSupportFeedback(form: FormTs) {
// IT Support Ticket Feedback Form
// Demonstrates: StarRating, EmojiRating, RatingScale (CES), ThumbRating, MatrixQuestion, conditional visibility, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'IT Support Feedback',
computedValue: () => 'Help us improve our IT support services.',
customStyles: {
background: 'linear-gradient(135deg, #0891b2 0%, #06b6d4 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Ticket Information
// ============================================
const ticketSection = form.addSubform('ticketSection', {
title: 'About Your Support Request'
});
ticketSection.addRow(row => {
row.addTextbox('ticketNumber', {
label: 'Ticket Number (if known)',
placeholder: 'e.g., INC-12345'
}, '1fr');
row.addDatepicker('requestDate', {
label: 'When did you submit your request?'
}, '1fr');
});
ticketSection.addRow(row => {
row.addDropdown('issueCategory', {
label: 'What type of issue did you report?',
isRequired: true,
options: [
{ id: 'hardware', name: 'Hardware (computer, printer, phone)' },
{ id: 'software', name: 'Software installation or error' },
{ id: 'network', name: 'Network or connectivity issue' },
{ id: 'email', name: 'Email or calendar problem' },
{ id: 'access', name: 'Access/permissions request' },
{ id: 'password', name: 'Password reset' },
{ id: 'security', name: 'Security concern' },
{ id: 'new-equipment', name: 'New equipment request' },
{ id: 'training', name: 'Training or how-to question' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select issue type...'
});
});
ticketSection.addRow(row => {
row.addRadioButton('issueResolved', {
label: 'Was your issue resolved?',
isRequired: true,
orientation: 'horizontal',
options: [
{ id: 'yes', name: 'Yes, fully resolved' },
{ id: 'partial', name: 'Partially resolved' },
{ id: 'no', name: 'No, not resolved' },
{ id: 'pending', name: 'Still in progress' }
]
});
});
// Unresolved issue follow-up
ticketSection.addRow(row => {
row.addTextarea('unresolvedDetails', {
label: 'Please describe what is still not working',
placeholder: 'Describe the remaining issue...',
rows: 2,
isVisible: () => {
const resolved = ticketSection.radioButton('issueResolved')?.value();
return resolved === 'no' || resolved === 'partial';
}
});
});
// ============================================
// SECTION 2: Resolution Experience
// ============================================
const resolutionSection = form.addSubform('resolutionSection', {
title: 'Resolution Experience',
isVisible: () => ticketSection.radioButton('issueResolved')?.value() !== null
});
resolutionSection.addRow(row => {
row.addRatingScale('effortScore', {
label: 'How easy was it to get your issue resolved?',
preset: 'ces',
alignment: 'center',
size: 'lg'
});
});
resolutionSection.addRow(row => {
row.addRadioButton('responseTime', {
label: 'How would you rate the initial response time?',
orientation: 'horizontal',
options: [
{ id: 'too-slow', name: 'Too slow' },
{ id: 'slow', name: 'Slower than expected' },
{ id: 'acceptable', name: 'Acceptable' },
{ id: 'fast', name: 'Faster than expected' },
{ id: 'very-fast', name: 'Very fast' }
]
});
});
resolutionSection.addRow(row => {
row.addRadioButton('resolutionTime', {
label: 'How would you rate the total resolution time?',
orientation: 'horizontal',
isVisible: () => {
const resolved = ticketSection.radioButton('issueResolved')?.value();
return resolved === 'yes' || resolved === 'partial';
},
options: [
{ id: 'too-long', name: 'Much too long' },
{ id: 'long', name: 'Longer than expected' },
{ id: 'acceptable', name: 'About right' },
{ id: 'fast', name: 'Faster than expected' },
{ id: 'very-fast', name: 'Very fast' }
]
});
});
// ============================================
// SECTION 3: Support Agent Rating
// ============================================
const agentSection = form.addSubform('agentSection', {
title: 'Support Agent Evaluation',
isVisible: () => ticketSection.radioButton('issueResolved')?.value() !== null
});
agentSection.addRow(row => {
row.addTextbox('agentName', {
label: 'Support agent name (if known)',
placeholder: 'Agent name...'
});
});
agentSection.addRow(row => {
row.addMatrixQuestion('agentRatings', {
label: 'How would you rate the support agent?',
rows: [
{ id: 'professionalism', label: 'Professionalism', isRequired: true },
{ id: 'knowledge', label: 'Technical knowledge', isRequired: true },
{ id: 'communication', label: 'Clear communication', isRequired: true },
{ id: 'responsiveness', label: 'Responsiveness', isRequired: true },
{ id: 'helpfulness', label: 'Willingness to help', 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
});
});
agentSection.addRow(row => {
row.addStarRating('overallAgentRating', {
label: 'Overall agent rating',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 4: Service Quality
// ============================================
const serviceSection = form.addSubform('serviceSection', {
title: 'IT Service Quality',
isVisible: () => ticketSection.radioButton('issueResolved')?.value() !== null
});
serviceSection.addRow(row => {
row.addStarRating('supportProcess', {
label: 'Support request process',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
row.addStarRating('communicationQuality', {
label: 'Communication quality',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
});
serviceSection.addRow(row => {
row.addStarRating('solutionQuality', {
label: 'Quality of solution',
maxStars: 5,
size: 'md',
alignment: 'center',
isVisible: () => {
const resolved = ticketSection.radioButton('issueResolved')?.value();
return resolved === 'yes' || resolved === 'partial';
}
}, '1fr');
row.addStarRating('followUp', {
label: 'Follow-up quality',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
});
serviceSection.addRow(row => {
row.addThumbRating('wouldUseAgain', {
label: 'Would you contact IT support again for similar issues?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Overall Satisfaction
// ============================================
const satisfactionSection = form.addSubform('satisfactionSection', {
title: 'Overall Satisfaction',
isVisible: () => ticketSection.radioButton('issueResolved')?.value() !== null,
customStyles: () => {
const satisfaction = satisfactionSection.emojiRating('overallSatisfaction')?.value();
if (satisfaction === 'excellent' || satisfaction === 'good') {
return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
} else if (satisfaction === 'very-bad' || satisfaction === 'bad') {
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
return { padding: '16px', borderRadius: '8px' };
}
});
satisfactionSection.addRow(row => {
row.addEmojiRating('overallSatisfaction', {
label: 'How satisfied are you with the overall IT support experience?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center',
showLabels: true
});
});
satisfactionSection.addRow(row => {
row.addRatingScale('recommendScore', {
label: 'How likely are you to recommend our IT support to colleagues?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
alignment: 'center'
});
});
// ============================================
// SECTION 6: Improvements & Comments
// ============================================
const improvementsSection = form.addSubform('improvementsSection', {
title: 'Suggestions for Improvement',
isVisible: () => ticketSection.radioButton('issueResolved')?.value() !== null
});
improvementsSection.addRow(row => {
row.addSuggestionChips('improvementAreas', {
label: 'What could we improve? (Select all that apply)',
suggestions: [
{ id: 'response-time', name: 'Faster response time' },
{ id: 'resolution-time', name: 'Faster resolution' },
{ id: 'communication', name: 'Better communication' },
{ id: 'knowledge', name: 'More technical expertise' },
{ id: 'self-service', name: 'Better self-service options' },
{ id: 'hours', name: 'Extended support hours' },
{ id: 'documentation', name: 'Better documentation' },
{ id: 'nothing', name: 'Nothing - great service!' }
],
alignment: 'center'
});
});
improvementsSection.addSpacer();
improvementsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Additional comments or suggestions',
placeholder: 'Share any other feedback about your IT support experience...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: Follow-up
// ============================================
const followUpSection = form.addSubform('followUpSection', {
title: 'Follow-up',
isVisible: () => {
const resolved = ticketSection.radioButton('issueResolved')?.value();
return resolved === 'no' || resolved === 'partial';
}
});
followUpSection.addRow(row => {
row.addCheckbox('needsFollowUp', {
label: 'I would like someone to follow up with me about my unresolved issue'
});
});
followUpSection.addRow(row => {
row.addEmail('followUpEmail', {
label: 'Email for follow-up',
placeholder: 'your@company.com',
isVisible: () => followUpSection.checkbox('needsFollowUp')?.value() === true,
isRequired: () => followUpSection.checkbox('needsFollowUp')?.value() === true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => {
const satisfaction = satisfactionSection.emojiRating('overallSatisfaction')?.value();
return satisfaction !== null && satisfaction !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const category = ticketSection.dropdown('issueCategory')?.value();
const resolved = ticketSection.radioButton('issueResolved')?.value();
const agentRating = agentSection.starRating('overallAgentRating')?.value();
const satisfaction = satisfactionSection.emojiRating('overallSatisfaction')?.value();
const nps = satisfactionSection.ratingScale('recommendScore')?.value();
const npsCategory = satisfactionSection.ratingScale('recommendScore')?.npsCategory();
const improvements = improvementsSection.suggestionChips('improvementAreas')?.value() || [];
const categoryLabels: Record<string, string> = {
'hardware': 'Hardware',
'software': 'Software',
'network': 'Network',
'email': 'Email',
'access': 'Access/Permissions',
'password': 'Password Reset',
'security': 'Security',
'new-equipment': 'New Equipment',
'training': 'Training',
'other': 'Other'
};
const resolvedLabels: Record<string, string> = {
'yes': 'Fully Resolved',
'partial': 'Partially Resolved',
'no': 'Not Resolved',
'pending': 'In Progress'
};
const satisfactionLabels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
let summary = `IT Support Feedback Summary\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `Issue Type: ${categoryLabels[category || ''] || 'N/A'}\n`;
summary += `Status: ${resolvedLabels[resolved || ''] || 'N/A'}\n`;
if (agentRating) {
summary += `Agent Rating: ${agentRating}/5 stars\n`;
}
if (satisfaction) {
summary += `Satisfaction: ${satisfactionLabels[satisfaction]}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `NPS: ${nps}/10 (${npsCategory})\n`;
}
if (improvements.length > 0 && !improvements.includes('nothing')) {
summary += `\nImprovement areas: ${improvements.length} selected`;
} else if (improvements.includes('nothing')) {
summary += `\nNo improvements needed - great service!`;
}
return summary;
},
customStyles: () => {
const satisfaction = satisfactionSection.emojiRating('overallSatisfaction')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (satisfaction === 'excellent' || satisfaction === 'good') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #0891b2' };
} else if (satisfaction === 'very-bad' || satisfaction === 'bad') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#e0f2fe', borderLeft: '4px solid #0891b2' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => ticketSection.radioButton('issueResolved')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your feedback helps us improve our IT support services. If you requested follow-up on an unresolved issue, a member of our team will contact you within 1 business day.'
});
}