export function onboardingDay1Survey(form: FormTs) {
// Day 1 Onboarding Check-in - New employee first day feedback
// Demonstrates: EmojiRating, CheckboxList, StarRating, ThumbRating, Datepicker, Timepicker, RadioButton
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Welcome! How Was Your First Day?',
computedValue: () => 'Quick check-in to make sure everything went smoothly.',
customStyles: {
background: 'linear-gradient(135deg, #2563eb 0%, #3b82f6 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Basic Info
// ============================================
const basicSection = form.addSubform('basicSection', {
title: 'About Your First Day'
});
basicSection.addRow(row => {
row.addDatepicker('startDate', {
label: 'Your start date',
isRequired: true
}, '1fr');
row.addTextbox('department', {
label: 'Department / Team',
placeholder: 'e.g., Engineering, Marketing, Sales...',
isRequired: true
}, '1fr');
});
basicSection.addRow(row => {
row.addTimepicker('arrivalTime', {
label: 'What time did you arrive?',
defaultValue: '09:00'
}, '1fr');
row.addTimepicker('departureTime', {
label: 'What time did you leave?',
defaultValue: '17:30'
}, '1fr');
});
// ============================================
// SECTION 2: First Impressions
// ============================================
const impressionSection = form.addSubform('impressionSection', {
title: 'First Impressions',
customStyles: () => {
const mood = impressionSection.emojiRating('overallMood')?.value();
if (mood === 'excellent' || mood === 'good') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (mood === 'very-bad' || mood === 'bad') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px' };
}
});
impressionSection.addRow(row => {
row.addEmojiRating('overallMood', {
label: 'How are you feeling after your first day?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
impressionSection.addRow(row => {
row.addThumbRating('feltWelcome', {
label: 'Did you feel welcomed by the team?',
showLabels: true,
upLabel: 'Yes, very welcomed!',
downLabel: 'Could be warmer',
size: 'lg',
alignment: 'center'
});
});
// Follow-up for not feeling welcome
impressionSection.addRow(row => {
row.addTextarea('welcomeDetails', {
label: 'What would have made you feel more welcome?',
placeholder: 'Your feedback helps us improve the welcome experience...',
rows: 2,
isVisible: () => impressionSection.thumbRating('feltWelcome')?.value() === 'down'
});
});
// ============================================
// SECTION 3: Onboarding Checklist
// ============================================
const checklistSection = form.addSubform('checklistSection', {
title: 'Onboarding Checklist'
});
checklistSection.addRow(row => {
row.addTextPanel('checklistInstructions', {
computedValue: () => 'Please check all items that were completed or provided today:',
customStyles: { color: '#6b7280', marginBottom: '8px' }
});
});
checklistSection.addSpacer();
checklistSection.addRow(row => {
row.addCheckboxList('equipmentItems', {
label: 'Equipment & Access',
options: [
{ id: 'laptop', name: 'Laptop/computer provided and working' },
{ id: 'email', name: 'Email account set up' },
{ id: 'systems', name: 'Access to necessary systems/tools' },
{ id: 'badge', name: 'Badge/keycard received' },
{ id: 'desk', name: 'Workspace/desk ready' },
{ id: 'phone', name: 'Phone/extension configured (if applicable)' }
],
orientation: 'vertical'
}, '1fr');
row.addCheckboxList('peopleItems', {
label: 'People & Orientation',
options: [
{ id: 'manager', name: 'Met with my manager' },
{ id: 'team', name: 'Introduced to team members' },
{ id: 'buddy', name: 'Assigned an onboarding buddy' },
{ id: 'hr', name: 'Completed HR paperwork' },
{ id: 'tour', name: 'Received office tour' },
{ id: 'lunch', name: 'Knew where to get lunch' }
],
orientation: 'vertical'
}, '1fr');
});
// Dynamic feedback based on checklist
checklistSection.addRow(row => {
row.addTextPanel('checklistStatus', {
computedValue: () => {
const equipment = checklistSection.checkboxList('equipmentItems')?.value() || [];
const people = checklistSection.checkboxList('peopleItems')?.value() || [];
const total = equipment.length + people.length;
if (total >= 10) return 'Great! Looks like you had a comprehensive Day 1.';
if (total >= 6) return 'Good progress! A few items might need follow-up.';
if (total >= 3) return 'Some gaps in onboarding. We\'ll make sure to follow up.';
return 'Looks like several things were missed. Don\'t worry, we\'ll address this!';
},
customStyles: () => {
const equipment = checklistSection.checkboxList('equipmentItems')?.value() || [];
const people = checklistSection.checkboxList('peopleItems')?.value() || [];
const total = equipment.length + people.length;
if (total >= 10) return { backgroundColor: '#d1fae5', padding: '12px', borderRadius: '6px', color: '#065f46' };
if (total >= 6) return { backgroundColor: '#fef3c7', padding: '12px', borderRadius: '6px', color: '#92400e' };
return { backgroundColor: '#fee2e2', padding: '12px', borderRadius: '6px', color: '#991b1b' };
},
isVisible: () => {
const equipment = checklistSection.checkboxList('equipmentItems')?.value() || [];
const people = checklistSection.checkboxList('peopleItems')?.value() || [];
return equipment.length > 0 || people.length > 0;
}
});
});
// ============================================
// SECTION 4: Preparedness & Support
// ============================================
const supportSection = form.addSubform('supportSection', {
title: 'Preparedness & Support'
});
supportSection.addRow(row => {
row.addStarRating('preparednessRating', {
label: 'How prepared did the company seem for your arrival?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
supportSection.addRow(row => {
row.addRadioButton('questionsAnswered', {
label: 'Were your questions answered during the day?',
options: [
{ id: 'all', name: 'Yes, all questions answered' },
{ id: 'most', name: 'Most questions, a few outstanding' },
{ id: 'some', name: 'Some answered, still have many' },
{ id: 'few', name: 'Few answered, felt lost' }
],
orientation: 'vertical'
});
});
// Follow-up for unanswered questions
supportSection.addRow(row => {
row.addTextarea('outstandingQuestions', {
label: 'What questions do you still have?',
placeholder: 'List any questions you\'d like answered...',
rows: 2,
autoExpand: true,
isVisible: () => {
const answered = supportSection.radioButton('questionsAnswered')?.value();
return answered === 'most' || answered === 'some' || answered === 'few';
}
});
});
// ============================================
// SECTION 5: Looking Forward
// ============================================
const forwardSection = form.addSubform('forwardSection', {
title: 'Looking Forward'
});
forwardSection.addRow(row => {
row.addEmojiRating('excitementLevel', {
label: 'How excited are you about starting this role?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
forwardSection.addRow(row => {
row.addTextarea('lookingForward', {
label: 'What are you most looking forward to?',
placeholder: 'Projects, learning opportunities, working with the team...',
rows: 2,
autoExpand: true
});
});
forwardSection.addRow(row => {
row.addTextarea('concerns', {
label: 'Any concerns or things we should know about?',
placeholder: 'Share anything that\'s on your mind - we want to help!',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 6: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Day 1 Summary',
isVisible: () => impressionSection.emojiRating('overallMood')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const mood = impressionSection.emojiRating('overallMood')?.value();
const feltWelcome = impressionSection.thumbRating('feltWelcome')?.value();
const equipment = checklistSection.checkboxList('equipmentItems')?.value() || [];
const people = checklistSection.checkboxList('peopleItems')?.value() || [];
const preparedness = supportSection.starRating('preparednessRating')?.value() ?? 0;
const department = basicSection.textbox('department')?.value() || 'Not specified';
const moodLabels: Record<string, string> = {
'very-bad': 'Struggling', 'bad': 'Uncertain', 'neutral': 'Okay',
'good': 'Good', 'excellent': 'Great!'
};
let summary = 'Day 1 Summary\n';
summary += '═'.repeat(20) + '\n\n';
summary += `Department: ${department}\n`;
summary += `Overall Mood: ${moodLabels[mood || ''] || 'Not rated'}\n`;
summary += `Felt Welcome: ${feltWelcome === 'up' ? 'Yes' : feltWelcome === 'down' ? 'Could improve' : 'Not answered'}\n`;
summary += `Preparedness: ${preparedness > 0 ? '★'.repeat(preparedness) + '☆'.repeat(5 - preparedness) : 'Not rated'}\n`;
summary += `\nChecklist Completed:\n`;
summary += ` Equipment: ${equipment.length}/6 items\n`;
summary += ` People/Orientation: ${people.length}/6 items\n`;
const total = equipment.length + people.length;
if (total < 8) {
summary += '\n⚠️ Some onboarding items need follow-up';
}
return summary;
},
customStyles: {
backgroundColor: '#f8fafc',
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px',
borderLeft: '4px solid #2563eb'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Day 1 Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Welcome to the team! Your Day 1 feedback helps us improve the onboarding experience. If you mentioned any issues, someone from HR will follow up with you tomorrow. Have a great rest of your first week!'
});
}