export function volunteerExperienceSurvey(form: FormTs) {
// Volunteer Experience Survey - Comprehensive feedback for non-profit organizations
// Demonstrates: MatrixQuestion, StarRating, EmojiRating, Conditional Visibility, Dynamic Labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Thank You for Volunteering!',
computedValue: () => 'Your feedback helps us create a better experience for all volunteers.',
customStyles: {
backgroundColor: '#059669',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Event/Activity Information
// ============================================
const eventSection = form.addSubform('eventSection', {
title: 'About Your Volunteer Activity'
});
eventSection.addRow(row => {
row.addTextbox('eventName', {
label: 'Event/Activity Name',
placeholder: 'e.g., Food Bank Saturday, Park Cleanup',
isRequired: true
}, '1fr');
row.addDatepicker('eventDate', {
label: 'Date of Activity',
isRequired: true
}, '200px');
});
eventSection.addRow(row => {
row.addDropdown('volunteerRole', {
label: 'Your Role',
options: [
{ id: 'general', name: 'General Volunteer' },
{ id: 'team-lead', name: 'Team Leader' },
{ id: 'coordinator', name: 'Event Coordinator' },
{ id: 'first-time', name: 'First-Time Volunteer' },
{ id: 'mentor', name: 'Volunteer Mentor' },
{ id: 'specialist', name: 'Specialist/Skilled Volunteer' }
],
isRequired: true
}, '1fr');
row.addInteger('hoursVolunteered', {
label: 'Hours Volunteered',
min: 1,
max: 24,
placeholder: 'Hours'
}, '150px');
});
// ============================================
// SECTION 2: Overall Experience Rating
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Experience'
});
overallSection.addRow(row => {
row.addEmojiRating('overallFeeling', {
label: 'How did you feel about your volunteer experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall Experience Rating',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 3: Detailed Ratings Matrix
// ============================================
const ratingsSection = form.addSubform('ratingsSection', {
title: 'Rate Your Experience',
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '8px' }
});
ratingsSection.addRow(row => {
row.addMatrixQuestion('experienceMatrix', {
label: 'Please rate each aspect of your volunteer experience',
rows: [
{ id: 'communication', label: 'Pre-event Communication', description: 'Information received before the event', isRequired: true },
{ id: 'training', label: 'Training & Orientation', description: 'Quality of instructions and preparation', isRequired: true },
{ id: 'staff-support', label: 'Staff Support', description: 'Helpfulness and availability of staff', isRequired: true },
{ id: 'organization', label: 'Event Organization', description: 'How well the event was organized', isRequired: true },
{ id: 'tasks', label: 'Task Meaningfulness', description: 'How meaningful your tasks felt', isRequired: true },
{ id: 'safety', label: 'Safety & Comfort', description: 'Physical safety and comfort during the event' }
],
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
});
});
// ============================================
// SECTION 4: Highlights & Challenges
// ============================================
const highlightsSection = form.addSubform('highlightsSection', {
title: 'What Stood Out?'
});
highlightsSection.addRow(row => {
row.addSuggestionChips('highlights', {
label: 'What did you enjoy most? (Select up to 3)',
suggestions: [
{ id: 'impact', name: 'Making a Difference' },
{ id: 'team', name: 'Great Team' },
{ id: 'learning', name: 'Learning New Skills' },
{ id: 'community', name: 'Community Connection' },
{ id: 'fun', name: 'Fun Atmosphere' },
{ id: 'organization', name: 'Well Organized' },
{ id: 'recognition', name: 'Felt Appreciated' },
{ id: 'meaningful', name: 'Meaningful Work' }
],
max: 3,
alignment: 'left'
});
});
highlightsSection.addRow(row => {
row.addSuggestionChips('challenges', {
label: 'Any challenges you faced? (Select all that apply)',
suggestions: [
{ id: 'unclear-tasks', name: 'Unclear Tasks' },
{ id: 'insufficient-training', name: 'Insufficient Training' },
{ id: 'poor-communication', name: 'Poor Communication' },
{ id: 'physical-demands', name: 'Physical Demands' },
{ id: 'time-management', name: 'Time Management' },
{ id: 'lack-support', name: 'Lack of Support' },
{ id: 'equipment', name: 'Equipment Issues' },
{ id: 'none', name: 'No Challenges' }
],
alignment: 'left'
});
});
// ============================================
// SECTION 5: Future Engagement
// ============================================
const futureSection = form.addSubform('futureSection', {
title: 'Future Volunteering'
});
futureSection.addRow(row => {
row.addRatingScale('recommendScore', {
preset: 'nps',
label: 'How likely are you to recommend volunteering with us to friends or family?',
showSegmentColors: true,
showCategoryLabel: true
});
});
futureSection.addRow(row => {
row.addRadioButton('volunteerAgain', {
label: 'Would you volunteer with us again?',
options: [
{ id: 'definitely', name: 'Definitely Yes' },
{ id: 'probably', name: 'Probably Yes' },
{ id: 'unsure', name: 'Not Sure' },
{ id: 'probably-not', name: 'Probably Not' },
{ id: 'no', name: 'Definitely Not' }
],
orientation: 'horizontal'
});
});
// Show follow-up for negative responses
futureSection.addSpacer();
futureSection.addRow(row => {
row.addTextarea('whyNotAgain', {
label: 'What would need to change for you to volunteer again?',
placeholder: 'Please share what we could improve...',
rows: 3,
isVisible: () => {
const answer = futureSection.radioButton('volunteerAgain')?.value();
return answer === 'unsure' || answer === 'probably-not' || answer === 'no';
}
});
});
// ============================================
// SECTION 6: Interests & Availability
// ============================================
const interestsSection = form.addSubform('interestsSection', {
title: 'Your Interests',
isVisible: () => {
const answer = futureSection.radioButton('volunteerAgain')?.value();
return answer !== 'probably-not' && answer !== 'no';
}
});
interestsSection.addRow(row => {
row.addCheckboxList('futureActivities', {
label: 'What types of activities interest you for future volunteering?',
options: [
{ id: 'events', name: 'Event Support' },
{ id: 'admin', name: 'Administrative Work' },
{ id: 'outreach', name: 'Community Outreach' },
{ id: 'fundraising', name: 'Fundraising' },
{ id: 'mentoring', name: 'Mentoring/Teaching' },
{ id: 'physical', name: 'Physical/Manual Work' },
{ id: 'professional', name: 'Professional Skills (Design, Marketing, etc.)' },
{ id: 'leadership', name: 'Leadership Roles' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 7: Additional Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Additional Comments'
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('additionalComments', {
label: () => {
const feeling = overallSection.emojiRating('overallFeeling')?.value();
if (feeling === 'excellent' || feeling === 'good') {
return 'What made this experience great? Any suggestions for improvement?';
}
if (feeling === 'very-bad' || feeling === 'bad') {
return 'We\'re sorry the experience wasn\'t great. How can we improve?';
}
return 'Any other comments or suggestions?';
},
placeholder: 'Share your thoughts...',
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 8: Contact (Optional)
// ============================================
const contactSection = form.addSubform('contactSection', {
title: 'Stay Connected (Optional)'
});
contactSection.addRow(row => {
row.addCheckbox('wantFollowUp', {
label: 'I\'d like to be contacted about future volunteer opportunities'
});
});
contactSection.addRow(row => {
row.addTextbox('volunteerName', {
label: 'Your Name',
isVisible: () => contactSection.checkbox('wantFollowUp')?.value() === true,
isRequired: () => contactSection.checkbox('wantFollowUp')?.value() === true
}, '1fr');
row.addEmail('volunteerEmail', {
label: 'Email Address',
placeholder: 'your@email.com',
isVisible: () => contactSection.checkbox('wantFollowUp')?.value() === true,
isRequired: () => contactSection.checkbox('wantFollowUp')?.value() === true
}, '1fr');
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const rating = overallSection.starRating('overallRating')?.value();
const feeling = overallSection.emojiRating('overallFeeling')?.value();
const nps = futureSection.ratingScale('recommendScore')?.value();
const npsCategory = futureSection.ratingScale('recommendScore')?.npsCategory();
const highlights = highlightsSection.suggestionChips('highlights')?.value() || [];
const volunteerAgain = futureSection.radioButton('volunteerAgain')?.value();
if (!rating) return '';
let emoji = '🌟';
if (rating >= 4) emoji = '🎉';
else if (rating <= 2) emoji = '💭';
let summary = `${emoji} Volunteer Feedback Summary\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `⭐ Overall Rating: ${rating}/5 stars\n`;
if (feeling) {
const feelingLabels: Record<string, string> = {
'very-bad': '😢 Very Unhappy',
'bad': '😕 Unhappy',
'neutral': '😐 Neutral',
'good': '🙂 Happy',
'excellent': '😍 Very Happy'
};
summary += `😊 Feeling: ${feelingLabels[feeling] || feeling}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `\n📊 Recommendation Score: ${nps}/10`;
if (npsCategory) {
summary += ` (${npsCategory.charAt(0).toUpperCase() + npsCategory.slice(1)})`;
}
summary += '\n';
}
if (highlights.length > 0) {
summary += `\n✨ Enjoyed: ${highlights.length} aspects highlighted`;
}
if (volunteerAgain) {
const againLabels: Record<string, string> = {
'definitely': '✅ Definitely volunteering again',
'probably': '👍 Likely to volunteer again',
'unsure': '🤔 Undecided about returning',
'probably-not': '⚠️ May not return',
'no': '❌ Not planning to return'
};
summary += `\n\n${againLabels[volunteerAgain] || ''}`;
}
return summary;
},
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value() || 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating >= 4) {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (rating <= 2) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#f0f9ff', borderLeft: '4px solid #3b82f6' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us improve the volunteer experience for everyone. We truly appreciate your time and dedication to our cause.'
});
}