export function pulseMonthlyForm(form: FormTs) {
// Monthly Engagement Pulse Survey
// Demonstrates: MatrixQuestion, StarRating, EmojiRating, RatingScale, Slider,
// SuggestionChips, Textarea, dynamic visibility, dynamic labels, computed values
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Monthly Engagement Pulse',
computedValue: () => 'Help us build a better workplace. Your honest feedback shapes our culture.',
customStyles: {
backgroundColor: '#8b5cf6',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center',
fontSize: '15px'
}
});
});
// ============================================
// SECTION 1: Overall Satisfaction
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Satisfaction',
customStyles: { backgroundColor: '#faf5ff', padding: '20px', borderRadius: '10px' }
});
overallSection.addRow(row => {
row.addStarRating('overallSatisfaction', {
label: 'How satisfied are you with your job this month?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true,
filledColor: '#8b5cf6'
});
});
overallSection.addRow(row => {
row.addEmojiRating('currentMood', {
label: 'How would you describe your current mood at work?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 2: Engagement Dimensions Matrix
// ============================================
const matrixSection = form.addSubform('engagement', {
title: 'Engagement Dimensions',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
matrixSection.addRow(row => {
row.addTextPanel('matrixIntro', {
computedValue: () => 'Rate your experience across these key areas:',
customStyles: {
color: '#6b7280',
marginBottom: '12px',
fontSize: '14px'
}
});
});
matrixSection.addRow(row => {
row.addMatrixQuestion('engagementMatrix', {
label: '',
rows: [
{ id: 'meaningful', label: 'My work feels meaningful', isRequired: true },
{ id: 'recognized', label: 'I feel recognized for my contributions', isRequired: true },
{ id: 'autonomy', label: 'I have autonomy in how I do my work', isRequired: true },
{ id: 'resources', label: 'I have the resources I need to succeed', isRequired: true },
{ id: 'aligned', label: 'I understand how my work connects to company goals', isRequired: true }
],
columns: [
{ id: '1', label: 'Strongly Disagree' },
{ id: '2', label: 'Disagree' },
{ id: '3', label: 'Neutral' },
{ id: '4', label: 'Agree' },
{ id: '5', label: 'Strongly Agree' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Workload & Balance
// ============================================
const workloadSection = form.addSubform('workload', {
title: 'Workload & Work-Life Balance',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null,
customStyles: () => {
const stress = workloadSection.ratingScale('stressLevel')?.value();
if (stress !== null && stress !== undefined) {
if (stress >= 6) return { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '10px' };
if (stress >= 4) return { backgroundColor: '#fffbeb', padding: '20px', borderRadius: '10px' };
return { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '10px' };
}
return { padding: '20px', borderRadius: '10px', border: '1px solid #e5e7eb' };
}
});
workloadSection.addRow(row => {
row.addSlider('workloadBalance', {
label: 'How would you rate your workload balance?',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
}, '1fr');
row.addTextPanel('workloadHint', {
computedValue: () => {
const value = workloadSection.slider('workloadBalance')?.value();
if (value === null || value === undefined) return '';
if (value <= 3) return '⚠️ Underutilized - Looking for more challenges';
if (value <= 7) return '✅ Well balanced - Manageable workload';
return '🔥 Overloaded - May need support';
},
customStyles: () => {
const value = workloadSection.slider('workloadBalance')?.value();
if (value === null || value === undefined) return {};
if (value <= 3) return { color: '#f59e0b', fontStyle: 'italic' };
if (value <= 7) return { color: '#10b981', fontStyle: 'italic' };
return { color: '#ef4444', fontStyle: 'italic' };
}
}, '1fr');
});
workloadSection.addSpacer({ height: '16px' });
workloadSection.addRow(row => {
row.addRatingScale('stressLevel', {
label: 'What is your current stress level?',
preset: 'custom',
min: 1,
max: 7,
lowLabel: 'Very low stress',
highLabel: 'Very high stress',
variant: 'segmented',
size: 'md',
alignment: 'center'
});
});
// Follow-up for high stress
workloadSection.addSpacer({
height: '16px',
isVisible: () => {
const stress = workloadSection.ratingScale('stressLevel')?.value();
return stress !== null && stress !== undefined && stress >= 5;
}
});
workloadSection.addRow(row => {
row.addCheckboxList('stressCauses', {
label: 'What are the main causes of your stress?',
options: [
{ id: 'deadlines', name: 'Tight deadlines' },
{ id: 'volume', name: 'High volume of work' },
{ id: 'unclear', name: 'Unclear expectations' },
{ id: 'meetings', name: 'Too many meetings' },
{ id: 'tools', name: 'Inefficient tools/processes' },
{ id: 'interpersonal', name: 'Interpersonal conflicts' },
{ id: 'personal', name: 'Personal circumstances' }
],
orientation: 'vertical',
isVisible: () => {
const stress = workloadSection.ratingScale('stressLevel')?.value();
return stress !== null && stress !== undefined && stress >= 5;
}
});
});
// ============================================
// SECTION 4: Growth & Development
// ============================================
const growthSection = form.addSubform('growth', {
title: 'Growth & Development',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null,
customStyles: { backgroundColor: '#eff6ff', padding: '20px', borderRadius: '10px' }
});
growthSection.addRow(row => {
row.addRatingScale('growthOpportunities', {
label: 'How satisfied are you with your growth opportunities?',
preset: 'satisfaction',
size: 'md',
alignment: 'center'
});
});
growthSection.addSpacer({ height: '12px' });
growthSection.addRow(row => {
row.addSuggestionChips('growthAreas', {
label: 'Which areas would you like to develop? (Select up to 3)',
suggestions: [
{ id: 'technical', name: 'Technical skills' },
{ id: 'leadership', name: 'Leadership' },
{ id: 'communication', name: 'Communication' },
{ id: 'project', name: 'Project management' },
{ id: 'strategic', name: 'Strategic thinking' },
{ id: 'creativity', name: 'Creativity/Innovation' },
{ id: 'industry', name: 'Industry knowledge' }
],
max: 3,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Manager & Team
// ============================================
const teamSection = form.addSubform('team', {
title: 'Manager & Team Dynamics',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
teamSection.addRow(row => {
row.addStarRating('managerSupport', {
label: 'How would you rate your manager\'s support this month?',
maxStars: 5,
size: 'md',
alignment: 'center',
filledColor: '#3b82f6'
}, '1fr');
row.addStarRating('teamCollaboration', {
label: 'How would you rate team collaboration?',
maxStars: 5,
size: 'md',
alignment: 'center',
filledColor: '#10b981'
}, '1fr');
});
// Follow-up for low manager rating
teamSection.addSpacer({
height: '16px',
isVisible: () => {
const manager = teamSection.starRating('managerSupport')?.value();
return manager !== null && manager !== undefined && manager <= 2;
}
});
teamSection.addRow(row => {
row.addTextarea('managerFeedback', {
label: () => {
const manager = teamSection.starRating('managerSupport')?.value();
if (manager !== null && manager !== undefined && manager <= 2) {
return 'What could your manager do better? (Your feedback is confidential)';
}
return 'Any feedback for your manager?';
},
placeholder: 'Share specific suggestions...',
rows: 3,
isVisible: () => {
const manager = teamSection.starRating('managerSupport')?.value();
return manager !== null && manager !== undefined && manager <= 2;
}
});
});
// ============================================
// SECTION 6: Highlights & Concerns
// ============================================
const feedbackSection = form.addSubform('feedback', {
title: 'Monthly Highlights & Concerns',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
feedbackSection.addRow(row => {
row.addSuggestionChips('monthHighlights', {
label: 'What went well this month?',
suggestions: [
{ id: 'project', name: 'Project success' },
{ id: 'learning', name: 'New learnings' },
{ id: 'team', name: 'Team wins' },
{ id: 'recognition', name: 'Got recognition' },
{ id: 'impact', name: 'Made an impact' },
{ id: 'growth', name: 'Personal growth' }
],
alignment: 'left'
}, '1fr');
row.addSuggestionChips('monthConcerns', {
label: 'What concerns you?',
suggestions: [
{ id: 'workload', name: 'Workload' },
{ id: 'direction', name: 'Team direction' },
{ id: 'communication', name: 'Communication gaps' },
{ id: 'tools', name: 'Tools/Processes' },
{ id: 'growth', name: 'Growth stagnation' },
{ id: 'culture', name: 'Culture issues' }
],
alignment: 'left'
}, '1fr');
});
feedbackSection.addSpacer({ height: '16px' });
feedbackSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: 'Anything else you\'d like to share?',
placeholder: 'Your thoughts, ideas, or suggestions...',
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 7: eNPS Score
// ============================================
const enpsSection = form.addSubform('enps', {
title: 'Employee Net Promoter Score',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null,
customStyles: () => {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '20px', borderRadius: '10px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '20px', borderRadius: '10px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '20px', borderRadius: '10px' };
return { padding: '20px', borderRadius: '10px', border: '1px solid #e5e7eb' };
}
});
enpsSection.addRow(row => {
row.addRatingScale('enpsScore', {
label: 'How likely are you to recommend this company as a place to work?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true,
alignment: 'center'
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Pulse Summary',
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overall = overallSection.starRating('overallSatisfaction')?.value();
const mood = overallSection.emojiRating('currentMood')?.value();
const workload = workloadSection.slider('workloadBalance')?.value();
const stress = workloadSection.ratingScale('stressLevel')?.value();
const growth = growthSection.ratingScale('growthOpportunities')?.value();
const manager = teamSection.starRating('managerSupport')?.value();
const team = teamSection.starRating('teamCollaboration')?.value();
const enps = enpsSection.ratingScale('enpsScore')?.value();
if (overall === null || overall === undefined) return '';
let summary = '📊 Monthly Pulse Summary\n';
summary += `${'═'.repeat(30)}\n\n`;
// Overall
const overallEmoji = overall >= 4 ? '⭐' : overall >= 3 ? '👍' : '⚠️';
summary += `${overallEmoji} Overall Satisfaction: ${overall}/5\n`;
// Mood
if (mood) {
const moodMap: Record<string, string> = {
'sad': '😢 Sad', 'down': '😔 Down', 'neutral': '😐 Neutral',
'happy': '😊 Happy', 'excited': '🤩 Excited'
};
summary += `🎭 Current Mood: ${moodMap[mood] || mood}\n`;
}
summary += '\n';
// Workload & Stress
if (workload !== null && workload !== undefined) {
const workloadEmoji = workload <= 3 ? '📉' : workload <= 7 ? '⚖️' : '📈';
summary += `${workloadEmoji} Workload Balance: ${workload}/10\n`;
}
if (stress !== null && stress !== undefined) {
const stressEmoji = stress <= 3 ? '😌' : stress <= 5 ? '😐' : '😰';
summary += `${stressEmoji} Stress Level: ${stress}/7\n`;
}
// Growth & Team
if (growth !== null && growth !== undefined) {
summary += `📈 Growth Satisfaction: ${growth}/5\n`;
}
if (manager !== null && manager !== undefined) {
summary += `👔 Manager Support: ${manager}/5\n`;
}
if (team !== null && team !== undefined) {
summary += `🤝 Team Collaboration: ${team}/5\n`;
}
// eNPS
if (enps !== null && enps !== undefined) {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
const enpsEmoji = category === 'promoter' ? '🎉' : category === 'passive' ? '🤔' : '😟';
summary += `\n${enpsEmoji} eNPS Score: ${enps}/10 (${category})`;
}
return summary;
},
customStyles: {
padding: '20px',
borderRadius: '10px',
backgroundColor: '#f8fafc',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px',
borderLeft: '4px solid #8b5cf6'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const category = enpsSection.ratingScale('enpsScore')?.npsCategory();
if (category === 'promoter') return 'Submit & Spread the Joy! 🎉';
return 'Submit Pulse';
},
isVisible: () => overallSection.starRating('overallSatisfaction')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your pulse feedback!',
message: 'Your insights help us build a better workplace. We review all feedback carefully and take action to improve your experience. See you next month!'
});
}