export function onboardingMonth1Survey(form: FormTs) {
// 30-Day Onboarding Check-in Survey
// Comprehensive assessment of new hire experience after first month
// Demonstrates: Pages (multi-page), RatingScale (NPS), MatrixQuestion, StarRating, EmojiRating, Slider, CheckboxList, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: '30-Day Onboarding Check-in',
computedValue: () => 'Congratulations on completing your first month! Help us improve the onboarding experience.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('surveyPages', { heightMode: 'tallest-page' });
// ============================================
// PAGE 1: Overall Experience & NPS
// ============================================
const page1 = pages.addPage('experience');
const experienceSection = page1.addSubform('experienceSection', {
title: 'Overall Experience'
});
experienceSection.addRow(row => {
row.addRatingScale('enps', {
preset: 'nps',
label: 'How likely are you to recommend our company as a great place to work?',
showCategoryLabel: true,
showSegmentColors: true,
isRequired: true
});
});
experienceSection.addRow(row => {
row.addTextPanel('npsCategory', {
computedValue: () => {
const category = experienceSection.ratingScale('enps')?.npsCategory();
if (category === 'promoter') return '🎉 Great to hear you\'re enjoying it here!';
if (category === 'passive') return '🤔 Thanks for the feedback. What would make it better?';
if (category === 'detractor') return '😟 We want to understand your concerns.';
return '';
},
customStyles: () => {
const category = experienceSection.ratingScale('enps')?.npsCategory();
const base = { textAlign: 'center', padding: '12px', borderRadius: '6px', marginTop: '8px' };
if (category === 'promoter') return { ...base, backgroundColor: '#d1fae5', color: '#065f46' };
if (category === 'passive') return { ...base, backgroundColor: '#fef3c7', color: '#92400e' };
if (category === 'detractor') return { ...base, backgroundColor: '#fee2e2', color: '#991b1b' };
return { display: 'none' };
},
isVisible: () => experienceSection.ratingScale('enps')?.value() !== null
});
});
experienceSection.addRow(row => {
row.addEmojiRating('overallMood', {
label: 'How would you describe your overall mood at work?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
experienceSection.addSpacer();
experienceSection.addRow(row => {
row.addTextarea('experienceComments', {
label: () => {
const category = experienceSection.ratingScale('enps')?.npsCategory();
if (category === 'promoter') return 'What do you love most about working here?';
if (category === 'detractor') return 'What concerns do you have about your experience so far?';
return 'Share any thoughts about your first month';
},
placeholder: 'Your feedback helps us improve the onboarding experience...',
rows: 3,
isVisible: () => experienceSection.ratingScale('enps')?.value() !== null
});
});
// Navigation button for page 1
page1.addRow(row => {
row.addButton('nextPage1', {
label: 'Next: Role & Training →',
onClick: () => pages.goToPage('roleTraining'),
isDisabled: () => experienceSection.ratingScale('enps')?.value() === null
});
});
// ============================================
// PAGE 2: Role Clarity & Training
// ============================================
const page2 = pages.addPage('roleTraining');
const roleSection = page2.addSubform('roleSection', {
title: 'Role Clarity'
});
roleSection.addRow(row => {
row.addMatrixQuestion('roleClarity', {
label: 'Rate your understanding of the following:',
rows: [
{ id: 'responsibilities', label: 'My day-to-day responsibilities', isRequired: true },
{ id: 'expectations', label: 'What\'s expected of me', isRequired: true },
{ id: 'success-metrics', label: 'How my success will be measured' },
{ id: 'growth-path', label: 'Career growth opportunities' },
{ id: 'team-role', label: 'How my role fits in the team' }
],
columns: [
{ id: 'unclear', label: 'Unclear' },
{ id: 'somewhat', label: 'Somewhat Clear' },
{ id: 'clear', label: 'Clear' },
{ id: 'very-clear', label: 'Very Clear' }
],
striped: true,
fullWidth: true
});
});
const trainingSection = page2.addSubform('trainingSection', {
title: 'Training Assessment'
});
trainingSection.addRow(row => {
row.addStarRating('trainingQuality', {
label: 'Overall quality of onboarding training',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
trainingSection.addRow(row => {
row.addSlider('trainingPace', {
label: 'Training pace (1 = Too slow, 5 = Too fast)',
min: 1,
max: 5,
step: 1,
defaultValue: 3,
showValue: true
}, '1fr');
row.addSlider('jobReadiness', {
label: 'How prepared do you feel to do your job?',
min: 1,
max: 10,
step: 1,
showValue: true,
unit: '/10'
}, '1fr');
});
trainingSection.addSpacer();
trainingSection.addRow(row => {
row.addCheckboxList('trainingGaps', {
label: 'Which areas need more training? (Select all that apply)',
options: [
{ id: 'tools', name: 'Tools & Systems' },
{ id: 'processes', name: 'Processes & Workflows' },
{ id: 'product', name: 'Product Knowledge' },
{ id: 'policies', name: 'Company Policies' },
{ id: 'technical', name: 'Technical Skills' },
{ id: 'soft-skills', name: 'Soft Skills' },
{ id: 'none', name: 'No additional training needed' }
],
orientation: 'vertical'
});
});
// Navigation buttons for page 2
page2.addRow(row => {
row.addButton('prevPage2', {
label: '← Back',
onClick: () => pages.goToPage('experience')
});
row.addButton('nextPage2', {
label: 'Next: Team & Support →',
onClick: () => pages.goToPage('teamSupport')
});
});
// ============================================
// PAGE 3: Team & Manager Support
// ============================================
const page3 = pages.addPage('teamSupport');
const teamSection = page3.addSubform('teamSection', {
title: 'Team Integration'
});
teamSection.addRow(row => {
row.addStarRating('teamWelcome', {
label: 'How welcomed did you feel by your team?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
teamSection.addRow(row => {
row.addRatingScale('belongingScale', {
preset: 'likert-5',
label: 'I feel like I belong on this team',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree'
});
});
const managerSection = page3.addSubform('managerSection', {
title: 'Manager Support'
});
managerSection.addRow(row => {
row.addMatrixQuestion('managerSupport', {
label: 'Rate your manager\'s onboarding support:',
rows: [
{ id: 'availability', label: 'Available when I need help' },
{ id: 'clear-guidance', label: 'Provides clear guidance' },
{ id: 'feedback', label: 'Gives regular feedback' },
{ id: 'check-ins', label: 'Conducts meaningful check-ins' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
managerSection.addRow(row => {
row.addDropdown('oneOnOneFrequency', {
label: 'How often do you have 1:1 meetings with your manager?',
options: [
{ id: 'daily', name: 'Daily' },
{ id: 'weekly', name: 'Weekly' },
{ id: 'biweekly', name: 'Every 2 weeks' },
{ id: 'monthly', name: 'Monthly' },
{ id: 'rarely', name: 'Rarely or never' }
],
placeholder: 'Select frequency...'
});
});
// Navigation buttons for page 3
page3.addRow(row => {
row.addButton('prevPage3', {
label: '← Back',
onClick: () => pages.goToPage('roleTraining')
});
row.addButton('nextPage3', {
label: 'Next: Final Thoughts →',
onClick: () => pages.goToPage('final')
});
});
// ============================================
// PAGE 4: Final Thoughts & Summary
// ============================================
const page4 = pages.addPage('final');
const resourcesSection = page4.addSubform('resourcesSection', {
title: 'Resources & Tools'
});
resourcesSection.addRow(row => {
row.addStarRating('toolsAccess', {
label: 'Access to necessary tools and resources',
maxStars: 5,
alignment: 'center'
});
});
resourcesSection.addRow(row => {
row.addThumbRating('hasEverything', {
label: 'Do you have everything you need to succeed?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'Not yet',
alignment: 'center'
});
});
resourcesSection.addRow(row => {
row.addTextarea('missingResources', {
label: 'What resources or tools are you still missing?',
placeholder: 'List any equipment, access, or resources you need...',
rows: 2,
isVisible: () => resourcesSection.thumbRating('hasEverything')?.value() === 'down'
});
});
const finalSection = page4.addSubform('finalSection', {
title: 'Final Thoughts'
});
finalSection.addRow(row => {
row.addTextarea('bestPart', {
label: 'What has been the best part of your first month?',
placeholder: 'Share a highlight...',
rows: 2
});
});
finalSection.addRow(row => {
row.addTextarea('improvements', {
label: 'What could we improve about the onboarding experience?',
placeholder: 'Your suggestions help future new hires...',
rows: 2
});
});
// Summary section
const summarySection = page4.addSubform('summary', {
title: 'Your Feedback Summary'
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const enps = experienceSection.ratingScale('enps')?.value();
const mood = experienceSection.emojiRating('overallMood')?.value();
const trainingRating = trainingSection.starRating('trainingQuality')?.value();
const teamWelcome = teamSection.starRating('teamWelcome')?.value();
const readiness = trainingSection.slider('jobReadiness')?.value();
if (!enps) return 'Complete the survey to see your summary.';
let emoji = '';
const category = experienceSection.ratingScale('enps')?.npsCategory();
if (category === 'promoter') emoji = '🎉';
else if (category === 'passive') emoji = '📊';
else emoji = '⚠️';
let summary = `${emoji} 30-Day Check-in Summary\n`;
summary += `${'═'.repeat(35)}\n\n`;
summary += `📊 eNPS Score: ${enps}/10\n`;
summary += `📈 Category: ${category?.charAt(0).toUpperCase()}${category?.slice(1)}\n`;
if (mood) {
const moodLabels: Record<string, string> = {
'sad': '😢 Struggling',
'down': '😔 Not great',
'neutral': '😐 Okay',
'happy': '😊 Good',
'excited': '🤩 Thriving'
};
summary += `\n${moodLabels[mood] || mood}\n`;
}
if (trainingRating) {
summary += `\n⭐ Training: ${trainingRating}/5 stars`;
}
if (teamWelcome) {
summary += `\n🤝 Team Welcome: ${teamWelcome}/5 stars`;
}
if (readiness) {
summary += `\n🎯 Job Readiness: ${readiness}/10`;
}
return summary;
},
customStyles: () => {
const category = experienceSection.ratingScale('enps')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (category === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9' };
}
});
});
// Back button for page 4
page4.addRow(row => {
row.addButton('prevPage4', {
label: '← Back',
onClick: () => pages.goToPage('teamSupport')
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit 30-Day Feedback',
isVisible: () => experienceSection.ratingScale('enps')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for completing your 30-day check-in!',
message: 'Your feedback is invaluable in helping us improve the onboarding experience for future team members. We appreciate your honesty and look forward to your continued success here.'
});
}