export function exitInterview(form: FormTs) {
// Exit Interview Form - Comprehensive HR offboarding survey
// Demonstrates: Multi-page (Pages), MatrixQuestion, RatingScale, comprehensive conditional logic
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Exit Interview Survey',
computedValue: () => 'Your honest feedback helps us build a better workplace',
customStyles: {
backgroundColor: '#6366f1',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
form.addRow(row => {
row.addTextPanel('confidentiality', {
computedValue: () => 'All responses are confidential and will be used only to improve our organization.',
customStyles: {
backgroundColor: '#f1f5f9',
padding: '12px',
borderRadius: '8px',
fontSize: '14px',
textAlign: 'center',
fontStyle: 'italic'
}
});
});
// ============================================
// MULTI-PAGE STRUCTURE
// ============================================
const pages = form.addPages('exitPages', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: Basic Information
// ============================================
const page1 = pages.addPage('basicInfo');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Step 1 of 5: Your Information',
customStyles: {
backgroundColor: '#eef2ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const infoSection = page1.addSubform('infoSection', {
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
infoSection.addRow(row => {
row.addDropdown('department', {
label: 'Department',
options: [
{ id: 'engineering', name: 'Engineering' },
{ id: 'sales', name: 'Sales' },
{ id: 'marketing', name: 'Marketing' },
{ id: 'hr', name: 'Human Resources' },
{ id: 'finance', name: 'Finance' },
{ id: 'operations', name: 'Operations' },
{ id: 'customer-success', name: 'Customer Success' },
{ id: 'product', name: 'Product' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select department',
isRequired: true
}, '1fr');
row.addDropdown('tenure', {
label: 'Length of Employment',
options: [
{ id: 'less-6', name: 'Less than 6 months' },
{ id: '6-12', name: '6-12 months' },
{ id: '1-2', name: '1-2 years' },
{ id: '2-5', name: '2-5 years' },
{ id: '5+', name: 'More than 5 years' }
],
placeholder: 'Select tenure',
isRequired: true
}, '1fr');
});
infoSection.addRow(row => {
row.addDropdown('role', {
label: 'Role Level',
options: [
{ id: 'entry', name: 'Entry Level' },
{ id: 'mid', name: 'Mid Level' },
{ id: 'senior', name: 'Senior Level' },
{ id: 'lead', name: 'Team Lead' },
{ id: 'manager', name: 'Manager' },
{ id: 'director', name: 'Director+' }
],
placeholder: 'Select level'
}, '1fr');
row.addDropdown('workArrangement', {
label: 'Work Arrangement',
options: [
{ id: 'office', name: 'Full-time Office' },
{ id: 'remote', name: 'Full-time Remote' },
{ id: 'hybrid', name: 'Hybrid' }
],
placeholder: 'Select arrangement'
}, '1fr');
});
page1.addRow(row => {
row.addButton('next1', {
label: 'Next: Reason for Leaving',
onClick: () => pages.goToPage('leavingReason')
});
});
// ============================================
// PAGE 2: Reason for Leaving
// ============================================
const page2 = pages.addPage('leavingReason');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Step 2 of 5: Reason for Leaving',
customStyles: {
backgroundColor: '#eef2ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const reasonSection = page2.addSubform('reasonSection', {
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
reasonSection.addRow(row => {
row.addDropdown('primaryReason', {
label: 'Primary reason for leaving',
options: [
{ id: 'new-opportunity', name: 'Better opportunity elsewhere' },
{ id: 'career-growth', name: 'Limited career growth' },
{ id: 'compensation', name: 'Compensation/Benefits' },
{ id: 'management', name: 'Issues with management' },
{ id: 'culture', name: 'Company culture' },
{ id: 'work-life', name: 'Work-life balance' },
{ id: 'relocation', name: 'Relocation/Personal reasons' },
{ id: 'job-fit', name: 'Role not a good fit' },
{ id: 'layoff', name: 'Layoff/Restructuring' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select primary reason',
isRequired: true
});
});
reasonSection.addRow(row => {
row.addCheckboxList('secondaryReasons', {
label: 'Other contributing factors (select all that apply)',
options: [
{ id: 'salary', name: 'Salary below market rate' },
{ id: 'benefits', name: 'Inadequate benefits' },
{ id: 'promotion', name: 'Lack of promotion opportunities' },
{ id: 'training', name: 'Insufficient training/development' },
{ id: 'recognition', name: 'Lack of recognition' },
{ id: 'workload', name: 'Excessive workload' },
{ id: 'stress', name: 'High stress environment' },
{ id: 'communication', name: 'Poor communication' },
{ id: 'tools', name: 'Outdated tools/technology' },
{ id: 'remote', name: 'Remote work policy' }
],
orientation: 'vertical'
});
});
reasonSection.addRow(row => {
row.addTextarea('reasonDetails', {
label: 'Please elaborate on your reasons',
placeholder: 'Share any additional context about your decision to leave...',
rows: 4,
autoExpand: true
});
});
page2.addRow(row => {
row.addButton('back2', {
label: 'Back',
onClick: () => pages.goToPage('basicInfo')
});
row.addEmpty('1fr');
row.addButton('next2', {
label: 'Next: Job Satisfaction',
onClick: () => pages.goToPage('satisfaction')
});
});
// ============================================
// PAGE 3: Job Satisfaction
// ============================================
const page3 = pages.addPage('satisfaction');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Step 3 of 5: Job Satisfaction',
customStyles: {
backgroundColor: '#eef2ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const satisfactionSection = page3.addSubform('satisfactionSection', {
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
satisfactionSection.addRow(row => {
row.addMatrixQuestion('jobSatisfaction', {
label: 'Please rate your satisfaction with the following aspects:',
rows: [
{ id: 'job-role', label: 'Your day-to-day job responsibilities', isRequired: true },
{ id: 'compensation', label: 'Compensation and benefits', isRequired: true },
{ id: 'workload', label: 'Workload and work-life balance', isRequired: false },
{ id: 'growth', label: 'Career growth opportunities', isRequired: false },
{ id: 'training', label: 'Training and development', isRequired: false },
{ id: 'tools', label: 'Tools and resources provided', isRequired: false }
],
columns: [
{ id: '1', label: 'Very Dissatisfied' },
{ id: '2', label: 'Dissatisfied' },
{ id: '3', label: 'Neutral' },
{ id: '4', label: 'Satisfied' },
{ id: '5', label: 'Very Satisfied' }
],
striped: true,
fullWidth: true
});
});
satisfactionSection.addRow(row => {
row.addRatingScale('overallSatisfaction', {
preset: 'satisfaction',
label: 'Overall, how satisfied were you working here?',
alignment: 'center',
size: 'lg'
});
});
page3.addRow(row => {
row.addButton('back3', {
label: 'Back',
onClick: () => pages.goToPage('leavingReason')
});
row.addEmpty('1fr');
row.addButton('next3', {
label: 'Next: Management & Culture',
onClick: () => pages.goToPage('management')
});
});
// ============================================
// PAGE 4: Management & Culture
// ============================================
const page4 = pages.addPage('management');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Step 4 of 5: Management & Culture',
customStyles: {
backgroundColor: '#eef2ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const managementSection = page4.addSubform('managementSection', {
title: 'Your Direct Manager',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
managementSection.addRow(row => {
row.addMatrixQuestion('managerRating', {
label: 'Please rate your direct manager on the following:',
rows: [
{ id: 'communication', label: 'Clear communication', isRequired: true },
{ id: 'support', label: 'Provided support and guidance', isRequired: true },
{ id: 'feedback', label: 'Gave constructive feedback', isRequired: false },
{ id: 'recognition', label: 'Recognized good work', isRequired: false },
{ id: 'fairness', label: 'Treated team fairly', isRequired: false },
{ id: 'advocacy', label: 'Advocated for team needs', 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
});
});
const cultureSection = page4.addSubform('cultureSection', {
title: 'Company Culture',
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#f8fafc' }
});
cultureSection.addRow(row => {
row.addRatingScale('cultureRating', {
preset: 'likert-5',
label: 'The company culture was positive and inclusive',
alignment: 'center',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree'
});
});
cultureSection.addRow(row => {
row.addSuggestionChips('culturePositives', {
label: 'What did you appreciate about our culture?',
suggestions: [
{ id: 'teamwork', name: 'Collaborative Team' },
{ id: 'innovation', name: 'Innovation Focus' },
{ id: 'diversity', name: 'Diversity & Inclusion' },
{ id: 'transparency', name: 'Transparency' },
{ id: 'flexibility', name: 'Flexibility' },
{ id: 'learning', name: 'Learning Culture' },
{ id: 'values', name: 'Strong Values' },
{ id: 'social', name: 'Social Events' }
],
max: 4,
alignment: 'center'
});
});
cultureSection.addRow(row => {
row.addSuggestionChips('cultureImprovements', {
label: 'What aspects of culture need improvement?',
suggestions: [
{ id: 'communication', name: 'Communication' },
{ id: 'recognition', name: 'Recognition' },
{ id: 'worklife', name: 'Work-Life Balance' },
{ id: 'leadership', name: 'Leadership' },
{ id: 'growth', name: 'Career Growth' },
{ id: 'processes', name: 'Processes' },
{ id: 'collaboration', name: 'Cross-team Collab' },
{ id: 'trust', name: 'Trust & Safety' }
],
max: 4,
alignment: 'center'
});
});
page4.addRow(row => {
row.addButton('back4', {
label: 'Back',
onClick: () => pages.goToPage('satisfaction')
});
row.addEmpty('1fr');
row.addButton('next4', {
label: 'Next: Final Thoughts',
onClick: () => pages.goToPage('final')
});
});
// ============================================
// PAGE 5: Final Thoughts & Recommendations
// ============================================
const page5 = pages.addPage('final');
page5.addRow(row => {
row.addTextPanel('page5Title', {
label: 'Step 5 of 5: Final Thoughts',
customStyles: {
backgroundColor: '#eef2ff',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const recommendSection = page5.addSubform('recommendSection', {
title: 'Would You Recommend Us?',
customStyles: () => {
const nps = recommendSection.ratingScale('eNPS')?.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('eNPS', {
preset: 'nps',
label: 'How likely are you to recommend this company as a place to work?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
recommendSection.addRow(row => {
row.addThumbRating('rehire', {
label: 'Would you consider returning to this company in the future?',
showLabels: true,
upLabel: 'Yes, possibly',
downLabel: 'No',
alignment: 'center',
size: 'lg'
});
});
const suggestionsSection = page5.addSubform('suggestionsSection', {
title: 'Your Recommendations',
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#f8fafc' }
});
suggestionsSection.addRow(row => {
row.addTextarea('improvements', {
label: 'What could we do differently to retain employees like you?',
placeholder: 'Your suggestions are valuable...',
rows: 3,
autoExpand: true
});
});
suggestionsSection.addRow(row => {
row.addTextarea('bestMemory', {
label: 'What was the best part of working here?',
placeholder: 'Share a positive memory or experience...',
rows: 2,
autoExpand: true
});
});
suggestionsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any additional comments?',
placeholder: 'Anything else you would like to share...',
rows: 3,
autoExpand: true
});
});
const contactPrefs = page5.addSubform('contactPrefs', {
title: 'Follow-up Preferences',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
contactPrefs.addRow(row => {
row.addCheckbox('alumniNetwork', {
label: 'Add me to the alumni network for future opportunities'
});
});
contactPrefs.addRow(row => {
row.addCheckbox('allowFollowUp', {
label: 'HR may contact me for follow-up questions'
});
});
contactPrefs.addRow(row => {
row.addEmail('personalEmail', {
label: 'Personal email (for alumni network)',
placeholder: 'your.personal@email.com',
isVisible: () => contactPrefs.checkbox('alumniNetwork')?.value() === true
});
});
page5.addRow(row => {
row.addButton('back5', {
label: 'Back',
onClick: () => pages.goToPage('management')
});
row.addEmpty('1fr');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Exit Interview',
isVisible: () => {
const currentPage = pages.currentPageIndex();
return currentPage === 4; // Show only on last page (0-indexed)
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback',
message: 'Your insights are invaluable in helping us create a better workplace. We wish you all the best in your future endeavors!'
});
}