export function fundraisingEventFeedback(form: FormTs) {
// Fundraising Event Feedback - Non-profit event evaluation
// Demonstrates: StarRating, EmojiRating, MatrixQuestion, Slider, Dropdown, SuggestionChips, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Fundraising Event Feedback',
computedValue: () => 'Thank you for supporting our mission. Your feedback helps us create better events.',
customStyles: {
backgroundColor: '#dc2626',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Event Experience
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Event Experience',
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value();
if (rating !== null && rating !== undefined) {
if (rating >= 4) return { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px', borderLeft: '4px solid #dc2626' };
if (rating >= 3) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px', borderLeft: '4px solid #f59e0b' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px', borderLeft: '4px solid #ef4444' };
}
return { padding: '16px', borderRadius: '8px', border: '1px dashed #fca5a5' };
}
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'How would you rate the overall event?',
maxStars: 5,
size: 'xl',
alignment: 'center',
filledColor: '#dc2626',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('eventMood', {
label: 'How did the event make you feel?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addDropdown('attendanceType', {
label: 'How did you attend the event?',
options: [
{ id: 'in-person', name: 'In-person attendance' },
{ id: 'virtual', name: 'Virtual/livestream' },
{ id: 'hybrid', name: 'Both in-person and virtual' }
],
placeholder: 'Select attendance type',
isRequired: true
}, '1fr');
row.addDropdown('attendedBefore', {
label: 'Have you attended our events before?',
options: [
{ id: 'first', name: 'First time' },
{ id: '2-3', name: '2-3 times' },
{ id: '4+', name: '4 or more times' }
],
placeholder: 'Select'
}, '1fr');
});
// ============================================
// SECTION 2: Event Components Matrix
// ============================================
const componentsSection = form.addSubform('componentsSection', {
title: 'Event Components',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #fecaca' }
});
componentsSection.addRow(row => {
row.addMatrixQuestion('eventComponents', {
label: 'Please rate the following aspects of the event:',
rows: [
{ id: 'venue', label: 'Venue & Atmosphere', description: 'Location, decor, ambiance', isRequired: true },
{ id: 'program', label: 'Program & Entertainment', description: 'Speakers, performances, activities', isRequired: true },
{ id: 'catering', label: 'Food & Beverages', description: 'Quality and variety', isRequired: false },
{ id: 'organization', label: 'Event Organization', description: 'Registration, timing, flow', isRequired: false },
{ id: 'staff', label: 'Staff & Volunteers', description: 'Helpfulness and friendliness', isRequired: false }
],
columns: [
{ id: 'na', label: 'N/A' },
{ 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 3: Donation Experience
// ============================================
const donationSection = form.addSubform('donationSection', {
title: 'Donation Experience',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#fef2f2' }
});
donationSection.addRow(row => {
row.addRadioButton('madeDonation', {
label: 'Did you make a donation at the event?',
options: [
{ id: 'yes', name: 'Yes, I donated' },
{ id: 'pledged', name: 'I made a pledge for later' },
{ id: 'no', name: 'No, I did not donate at this event' }
],
orientation: 'vertical'
});
});
// Donation details (conditional)
const donationDetails = donationSection.addSubform('donationDetails', {
isVisible: () => {
const donated = donationSection.radioButton('madeDonation')?.value();
return donated === 'yes' || donated === 'pledged';
},
customStyles: { backgroundColor: 'white', padding: '16px', borderRadius: '8px', marginTop: '12px' }
});
donationDetails.addRow(row => {
row.addDropdown('donationMethod', {
label: 'How did you donate?',
options: [
{ id: 'online', name: 'Online/Mobile' },
{ id: 'card', name: 'Credit/Debit card at event' },
{ id: 'check', name: 'Check' },
{ id: 'cash', name: 'Cash' },
{ id: 'auction', name: 'Auction item' },
{ id: 'other', name: 'Other method' }
],
placeholder: 'Select donation method'
}, '1fr');
row.addDropdown('donationAmount', {
label: 'Approximate donation amount',
options: [
{ id: 'under-50', name: 'Under $50' },
{ id: '50-100', name: '$50 - $100' },
{ id: '100-250', name: '$100 - $250' },
{ id: '250-500', name: '$250 - $500' },
{ id: '500-1000', name: '$500 - $1,000' },
{ id: '1000+', name: '$1,000+' }
],
placeholder: 'Select amount range'
}, '1fr');
});
donationDetails.addRow(row => {
row.addRatingScale('donationEase', {
preset: 'ces',
label: 'How easy was the donation process?',
lowLabel: 'Very Difficult',
highLabel: 'Very Easy',
alignment: 'center'
});
});
donationDetails.addRow(row => {
row.addStarRating('donationSatisfaction', {
label: 'How satisfied are you with your donation experience?',
maxStars: 5,
size: 'lg',
alignment: 'center',
filledColor: '#dc2626'
});
});
// ============================================
// SECTION 4: Cause Connection
// ============================================
const causeSection = form.addSubform('causeSection', {
title: 'Connection to Our Cause',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
causeSection.addRow(row => {
row.addRatingScale('causeConnection', {
preset: 'likert-5',
label: 'The event strengthened my connection to the cause',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
causeSection.addRow(row => {
row.addRatingScale('impactClarity', {
preset: 'likert-5',
label: 'I understand how my donation will make an impact',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
causeSection.addRow(row => {
row.addSlider('futureSupport', {
label: 'How likely are you to support future events? (0-100%)',
min: 0,
max: 100,
step: 10,
showValue: true,
unit: '%',
defaultValue: 50
});
});
// ============================================
// SECTION 5: Event Highlights (for satisfied attendees)
// ============================================
const highlightsSection = form.addSubform('highlightsSection', {
title: 'What Made the Event Special',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
highlightsSection.addRow(row => {
row.addSuggestionChips('highlights', {
label: 'What did you enjoy most? (select up to 4)',
suggestions: [
{ id: 'speakers', name: 'Inspiring speakers' },
{ id: 'networking', name: 'Networking opportunities' },
{ id: 'entertainment', name: 'Entertainment' },
{ id: 'food', name: 'Food & drinks' },
{ id: 'venue', name: 'Beautiful venue' },
{ id: 'cause', name: 'Stories of impact' },
{ id: 'auction', name: 'Auction items' },
{ id: 'community', name: 'Sense of community' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 6: Areas for Improvement (for less satisfied)
// ============================================
const improvementsSection = form.addSubform('improvementsSection', {
title: 'How We Can Improve',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating <= 3;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
improvementsSection.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'What could we improve? (select all that apply)',
suggestions: [
{ id: 'venue', name: 'Venue/location' },
{ id: 'program', name: 'Program content' },
{ id: 'timing', name: 'Event timing/length' },
{ id: 'food', name: 'Food & beverages' },
{ id: 'organization', name: 'Organization' },
{ id: 'communication', name: 'Communication' },
{ id: 'donation', name: 'Donation process' },
{ id: 'value', name: 'Value for ticket price' }
],
alignment: 'center'
});
});
improvementsSection.addSpacer();
improvementsSection.addRow(row => {
row.addTextarea('improvementDetails', {
label: 'Please share specific suggestions for improvement',
placeholder: 'Your feedback helps us create better events...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: Future Engagement
// ============================================
const futureSection = form.addSubform('futureSection', {
title: 'Future Engagement',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
futureSection.addRow(row => {
row.addThumbRating('attendAgain', {
label: 'Would you attend this event again?',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'center',
size: 'lg'
}, '1fr');
row.addThumbRating('recommend', {
label: 'Would you recommend this event to friends?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center',
size: 'lg'
}, '1fr');
});
futureSection.addRow(row => {
row.addCheckboxList('stayConnected', {
label: 'How would you like to stay connected?',
options: [
{ id: 'newsletter', name: 'Email newsletter' },
{ id: 'events', name: 'Future event invitations' },
{ id: 'volunteer', name: 'Volunteer opportunities' },
{ id: 'social', name: 'Social media updates' }
],
orientation: 'horizontal'
});
});
futureSection.addSpacer();
futureSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other comments or suggestions?',
placeholder: 'Share your thoughts with us...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const overall = overallSection.starRating('overallRating')?.value();
const mood = overallSection.emojiRating('eventMood')?.value();
const donated = donationSection.radioButton('madeDonation')?.value();
const donationSat = donationDetails.starRating('donationSatisfaction')?.value();
const futureSupport = causeSection.slider('futureSupport')?.value();
const attendAgain = futureSection.thumbRating('attendAgain')?.value();
const recommend = futureSection.thumbRating('recommend')?.value();
const highlights = highlightsSection.suggestionChips('highlights')?.value() || [];
const improvements = improvementsSection.suggestionChips('improvements')?.value() || [];
if (overall === null || overall === undefined) return '';
const moodLabels: Record<string, string> = {
'sad': 'Disappointed',
'down': 'Underwhelmed',
'neutral': 'Neutral',
'happy': 'Happy',
'excited': 'Inspired'
};
let emoji = '';
if (overall >= 4) emoji = '❤️';
else if (overall >= 3) emoji = '👍';
else emoji = '😔';
let summary = `${emoji} EVENT FEEDBACK\n`;
summary += `${'═'.repeat(25)}\n\n`;
summary += `Overall: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)} (${overall}/5)\n`;
if (mood) {
summary += `Feeling: ${moodLabels[mood] || mood}\n`;
}
if (donated) {
const donationLabels: Record<string, string> = {
'yes': 'Made donation',
'pledged': 'Made pledge',
'no': 'Did not donate'
};
summary += `\nDonation: ${donationLabels[donated]}\n`;
if ((donated === 'yes' || donated === 'pledged') && donationSat) {
summary += `Donation Experience: ${'★'.repeat(donationSat)}${'☆'.repeat(5 - donationSat)}\n`;
}
}
if (futureSupport !== null && futureSupport !== undefined) {
summary += `\nFuture Support: ${futureSupport}% likely\n`;
}
if (highlights.length > 0) {
summary += `\n✨ Highlights: ${highlights.length} selected`;
}
if (improvements.length > 0) {
summary += `\n⚠️ To improve: ${improvements.length} selected`;
}
if (attendAgain !== null || recommend !== null) {
summary += '\n\n';
if (attendAgain) {
summary += `Attend again: ${attendAgain === 'up' ? '👍 Yes' : '👎 No'}\n`;
}
if (recommend) {
summary += `Recommend: ${recommend === 'up' ? '👍 Yes' : '👎 No'}`;
}
}
return summary;
},
customStyles: () => {
const overall = overallSection.starRating('overallRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (overall !== null && overall !== undefined) {
if (overall >= 4) {
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #dc2626' };
} else if (overall >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #dc2626' };
}
});
});
// ============================================
// 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 input helps us create better events and serve our cause more effectively. We are grateful for your support and look forward to seeing you at future events!'
});
}