export function conferenceFeedback(form: FormTs) {
// Conference Feedback Form - Comprehensive multi-page event evaluation
// Demonstrates: Pages (multi-page wizard), MatrixQuestion, RatingScale, StarRating, EmojiRating, SuggestionChips, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Conference Feedback Survey',
computedValue: () => 'Help us make our next event even better',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE STRUCTURE
// ============================================
const pages = form.addPages('conferencePages', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: Overall Experience
// ============================================
const page1 = pages.addPage('overall');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Page 1 of 4: Overall Experience',
customStyles: {
backgroundColor: '#ede9fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const overallSection = page1.addSubform('overallSection', {
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
overallSection.addRow(row => {
row.addEmojiRating('overallMood', {
label: 'How would you describe your conference experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall Conference Rating',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addDropdown('attendanceType', {
label: 'How did you attend?',
options: [
{ id: 'in-person', name: 'In-person' },
{ id: 'virtual', name: 'Virtual/Online' },
{ id: 'hybrid', name: 'Both (Hybrid)' }
],
placeholder: 'Select attendance type',
isRequired: true
}, '1fr');
row.addDropdown('attendedBefore', {
label: 'Have you attended before?',
options: [
{ id: 'first', name: 'First time' },
{ id: '2-3', name: '2-3 times' },
{ id: '4+', name: '4 or more times' }
],
placeholder: 'Select'
}, '1fr');
});
overallSection.addRow(row => {
row.addRatingScale('metExpectations', {
preset: 'likert-5',
label: 'The conference met my expectations',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
page1.addRow(row => {
row.addEmpty('1fr');
row.addButton('next1', {
label: 'Next: Sessions & Content',
onClick: () => pages.goToPage('sessions')
});
});
// ============================================
// PAGE 2: Sessions & Content
// ============================================
const page2 = pages.addPage('sessions');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Page 2 of 4: Sessions & Content',
customStyles: {
backgroundColor: '#ede9fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const sessionsSection = page2.addSubform('sessionsSection', {
title: 'Session Quality',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
sessionsSection.addRow(row => {
row.addMatrixQuestion('sessionRatings', {
label: 'Rate the sessions you attended:',
rows: [
{ id: 'keynote', label: 'Keynote Sessions', description: 'Main stage presentations', isRequired: true },
{ id: 'breakout', label: 'Breakout Sessions', description: 'Parallel track sessions', isRequired: false },
{ id: 'workshops', label: 'Workshops/Hands-on', description: 'Interactive sessions', isRequired: false },
{ id: 'panels', label: 'Panel Discussions', description: 'Expert panels and Q&A', 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
});
});
sessionsSection.addRow(row => {
row.addMatrixQuestion('contentQuality', {
label: 'Rate the content quality:',
rows: [
{ id: 'relevance', label: 'Relevance to your role/industry', isRequired: true },
{ id: 'depth', label: 'Depth of information', isRequired: true },
{ id: 'actionable', label: 'Actionable takeaways', isRequired: false },
{ id: 'variety', label: 'Topic variety and coverage', isRequired: false }
],
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
});
});
const speakersSection = page2.addSubform('speakersSection', {
title: 'Speaker Quality'
});
speakersSection.addRow(row => {
row.addStarRating('speakersOverall', {
label: 'Overall quality of speakers',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
speakersSection.addRow(row => {
row.addSuggestionChips('speakerHighlights', {
label: 'What made speakers effective? (select up to 4)',
suggestions: [
{ id: 'knowledgeable', name: 'Deep expertise' },
{ id: 'engaging', name: 'Engaging presentation' },
{ id: 'practical', name: 'Practical examples' },
{ id: 'interactive', name: 'Interactive Q&A' },
{ id: 'slides', name: 'Great visuals/slides' },
{ id: 'pace', name: 'Good pacing' },
{ id: 'storytelling', name: 'Compelling stories' },
{ id: 'demo', name: 'Live demonstrations' }
],
max: 4,
alignment: 'center'
});
});
speakersSection.addSpacer();
speakersSection.addRow(row => {
row.addTextarea('sessionComments', {
label: 'Comments on sessions or speakers',
placeholder: 'Share what you liked or what could be improved...',
rows: 2,
autoExpand: true
});
});
page2.addRow(row => {
row.addButton('back2', {
label: 'Back',
onClick: () => pages.goToPage('overall')
});
row.addEmpty('1fr');
row.addButton('next2', {
label: 'Next: Venue & Logistics',
onClick: () => pages.goToPage('venue')
});
});
// ============================================
// PAGE 3: Venue & Logistics
// ============================================
const page3 = pages.addPage('venue');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Page 3 of 4: Venue & Logistics',
customStyles: {
backgroundColor: '#ede9fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
// In-person venue section
const venueSection = page3.addSubform('venueSection', {
title: 'Venue & Facilities',
isVisible: () => {
const type = overallSection.dropdown('attendanceType')?.value();
return type === 'in-person' || type === 'hybrid';
},
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
venueSection.addRow(row => {
row.addMatrixQuestion('venueRatings', {
label: 'Rate the venue facilities:',
rows: [
{ id: 'location', label: 'Location & Accessibility', isRequired: true },
{ id: 'rooms', label: 'Session rooms (size, AV, seating)', isRequired: true },
{ id: 'catering', label: 'Food & Beverages', isRequired: false },
{ id: 'wifi', label: 'WiFi & Connectivity', isRequired: false },
{ id: 'signage', label: 'Signage & Navigation', isRequired: false },
{ id: 'cleanliness', label: 'Cleanliness', isRequired: false }
],
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
});
});
// Virtual platform section
const virtualSection = page3.addSubform('virtualSection', {
title: 'Virtual Platform Experience',
isVisible: () => {
const type = overallSection.dropdown('attendanceType')?.value();
return type === 'virtual' || type === 'hybrid';
},
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
virtualSection.addRow(row => {
row.addMatrixQuestion('platformRatings', {
label: 'Rate the virtual platform:',
rows: [
{ id: 'ease', label: 'Easy to use and navigate', isRequired: true },
{ id: 'streaming', label: 'Stream quality', isRequired: true },
{ id: 'chat', label: 'Chat and Q&A features', isRequired: false },
{ id: 'networking', label: 'Virtual networking tools', isRequired: false },
{ id: 'ondemand', label: 'On-demand/replay availability', isRequired: false }
],
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
});
});
// Logistics section (for all)
const logisticsSection = page3.addSubform('logisticsSection', {
title: 'Event Organization'
});
logisticsSection.addRow(row => {
row.addRatingScale('registration', {
preset: 'likert-5',
label: 'Registration process was smooth',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
logisticsSection.addRow(row => {
row.addRatingScale('communication', {
preset: 'likert-5',
label: 'Pre-event communication was clear and helpful',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
logisticsSection.addRow(row => {
row.addRatingScale('schedule', {
preset: 'likert-5',
label: 'Schedule and agenda were well-organized',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
alignment: 'center'
});
});
page3.addRow(row => {
row.addButton('back3', {
label: 'Back',
onClick: () => pages.goToPage('sessions')
});
row.addEmpty('1fr');
row.addButton('next3', {
label: 'Next: Networking & Final Thoughts',
onClick: () => pages.goToPage('final')
});
});
// ============================================
// PAGE 4: Networking & Final Thoughts
// ============================================
const page4 = pages.addPage('final');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Page 4 of 4: Networking & Final Thoughts',
customStyles: {
backgroundColor: '#ede9fe',
padding: '12px 16px',
borderRadius: '8px',
fontWeight: 'bold'
}
});
});
const networkingSection = page4.addSubform('networkingSection', {
title: 'Networking & Connections',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
networkingSection.addRow(row => {
row.addStarRating('networkingQuality', {
label: 'Rate the networking opportunities',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
networkingSection.addRow(row => {
row.addDropdown('connectionsCount', {
label: 'How many valuable connections did you make?',
options: [
{ id: '0', name: 'None' },
{ id: '1-3', name: '1-3 connections' },
{ id: '4-10', name: '4-10 connections' },
{ id: '10+', name: 'More than 10' }
],
placeholder: 'Select'
}, '1fr');
row.addDropdown('networkingFormat', {
label: 'Most valuable networking format?',
options: [
{ id: 'sessions', name: 'During sessions/Q&A' },
{ id: 'breaks', name: 'Coffee breaks' },
{ id: 'dedicated', name: 'Dedicated networking time' },
{ id: 'social', name: 'Social events' },
{ id: 'virtual', name: 'Virtual networking tools' },
{ id: 'none', name: 'Did not network' }
],
placeholder: 'Select'
}, '1fr');
});
const recommendSection = page4.addSubform('recommendSection', {
title: 'Would You Recommend?',
customStyles: () => {
const nps = recommendSection.ratingScale('conferenceNPS')?.npsCategory();
if (nps === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (nps === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (nps === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
recommendSection.addRow(row => {
row.addRatingScale('conferenceNPS', {
preset: 'nps',
label: 'How likely are you to recommend this conference to a colleague?',
showSegmentColors: true,
showCategoryLabel: true,
showConfettiOnPromoter: true,
alignment: 'center'
});
});
recommendSection.addRow(row => {
row.addThumbRating('returnIntent', {
label: 'Would you attend this conference again next year?',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'center',
size: 'lg'
});
});
const futureSection = page4.addSubform('futureSection', {
title: 'Future Topics & Suggestions'
});
futureSection.addRow(row => {
row.addSuggestionChips('topicsWanted', {
label: 'What topics would you like to see covered?',
suggestions: [
{ id: 'innovation', name: 'Innovation & Trends' },
{ id: 'case-studies', name: 'Case Studies' },
{ id: 'hands-on', name: 'Hands-on Workshops' },
{ id: 'networking', name: 'More Networking' },
{ id: 'deep-dive', name: 'Deep-dive Technical' },
{ id: 'leadership', name: 'Leadership' },
{ id: 'industry', name: 'Industry Updates' },
{ id: 'beginner', name: 'Beginner Content' }
],
max: 4,
alignment: 'center'
});
});
futureSection.addSpacer();
futureSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'Any other suggestions for improving future events?',
placeholder: 'Share your ideas...',
rows: 3,
autoExpand: true
});
});
futureSection.addRow(row => {
row.addTextarea('highlights', {
label: 'What was the highlight of the conference for you?',
placeholder: 'Share your favorite moment...',
rows: 2,
autoExpand: true
});
});
// Summary section
const summarySection = page4.addSubform('summarySection', {
title: 'Your Feedback Summary',
isVisible: () => recommendSection.ratingScale('conferenceNPS')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overall = overallSection.starRating('overallRating')?.value();
const speakers = speakersSection.starRating('speakersOverall')?.value();
const networking = networkingSection.starRating('networkingQuality')?.value();
const nps = recommendSection.ratingScale('conferenceNPS')?.npsCategory();
const attendance = overallSection.dropdown('attendanceType')?.value();
const returnIntent = recommendSection.thumbRating('returnIntent')?.value();
if (!overall) return '';
const attendanceLabels: Record<string, string> = {
'in-person': 'In-person',
'virtual': 'Virtual',
'hybrid': 'Hybrid'
};
let summary = `CONFERENCE FEEDBACK\n`;
summary += `${'═'.repeat(25)}\n\n`;
if (attendance) {
summary += `Attendance: ${attendanceLabels[attendance] || attendance}\n\n`;
}
summary += `Overall: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)} (${overall}/5)\n`;
if (speakers) {
summary += `Speakers: ${'★'.repeat(speakers)}${'☆'.repeat(5 - speakers)} (${speakers}/5)\n`;
}
if (networking) {
summary += `Networking: ${'★'.repeat(networking)}${'☆'.repeat(5 - networking)} (${networking}/5)\n`;
}
if (nps) {
const emoji = nps === 'promoter' ? '🎉' : nps === 'passive' ? '😐' : '😟';
summary += `\n${emoji} NPS Category: ${nps.charAt(0).toUpperCase() + nps.slice(1)}\n`;
}
if (returnIntent) {
summary += `\nReturn next year: ${returnIntent === 'up' ? 'Yes' : 'No'}`;
}
return summary;
},
customStyles: () => {
const nps = recommendSection.ratingScale('conferenceNPS')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (nps === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (nps === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (nps === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #7c3aed' };
}
});
});
page4.addRow(row => {
row.addButton('back4', {
label: 'Back',
onClick: () => pages.goToPage('venue')
});
row.addEmpty('1fr');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => {
const currentPage = pages.currentPageIndex();
return currentPage === 3; // Show only on last page (0-indexed)
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us create better conference experiences. We look forward to seeing you at our next event!'
});
}