export function virtualEventFeedback(form: FormTs) {
// Virtual Event Feedback Form
// Demonstrates: RatingScale, StarRating, MatrixQuestion, EmojiRating, Slider, conditional logic
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Virtual Event Feedback',
computedValue: () => 'Help us improve our virtual events by sharing your experience.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Experience
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Experience'
});
overallSection.addRow(row => {
row.addEmojiRating('quickRating', {
label: 'How was your overall experience at this virtual event?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addSlider('attendanceTime', {
label: 'Approximately how much of the event did you attend?',
min: 0,
max: 100,
step: 10,
unit: '%',
defaultValue: 80
});
});
// ============================================
// SECTION 2: Technical Quality
// ============================================
const techSection = form.addSubform('technical', {
title: 'Technical Quality',
customStyles: () => {
const overallTech = techSection.starRating('overallTechRating')?.value();
if (overallTech !== null && overallTech !== undefined && overallTech <= 2) {
return { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' };
}
return {};
}
});
techSection.addRow(row => {
row.addStarRating('overallTechRating', {
label: 'How would you rate the overall technical quality?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
techSection.addRow(row => {
row.addMatrixQuestion('techAspects', {
label: 'Please rate the following technical aspects:',
rows: [
{ id: 'platform', label: 'Platform stability (no crashes/freezes)' },
{ id: 'audio', label: 'Audio quality' },
{ id: 'video', label: 'Video quality' },
{ id: 'screenshare', label: 'Screen sharing visibility' },
{ id: 'joining', label: 'Ease of joining the event' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'na', label: 'N/A' }
],
fullWidth: true
});
});
// Technical issues follow-up
techSection.addSpacer({ height: '16px' });
techSection.addRow(row => {
row.addCheckboxList('techIssues', {
label: 'Did you experience any of these issues?',
options: [
{ id: 'disconnects', name: 'Connection drops/disconnects' },
{ id: 'audio-lag', name: 'Audio lag or echo' },
{ id: 'video-freeze', name: 'Video freezing' },
{ id: 'login-problems', name: 'Difficulty logging in' },
{ id: 'chat-issues', name: 'Chat not working properly' },
{ id: 'none', name: 'No issues experienced' }
],
orientation: 'vertical'
});
});
techSection.addRow(row => {
row.addTextarea('techDetails', {
label: 'Please describe the technical issues you experienced:',
placeholder: 'What happened and how did it affect your experience?',
rows: 3,
isVisible: () => {
const issues = techSection.checkboxList('techIssues')?.value() || [];
return issues.length > 0 && !issues.includes('none');
}
});
});
// ============================================
// SECTION 3: Content Quality
// ============================================
const contentSection = form.addSubform('content', {
title: 'Content & Speakers'
});
contentSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'How would you rate the content quality?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
contentSection.addRow(row => {
row.addRatingScale('contentRelevance', {
label: 'How relevant was the content to your needs?',
preset: 'likert-5',
lowLabel: 'Not relevant',
highLabel: 'Highly relevant',
alignment: 'center'
});
});
contentSection.addRow(row => {
row.addStarRating('speakerRating', {
label: 'How would you rate the speaker(s) performance?',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
row.addStarRating('paceRating', {
label: 'How was the pace of the presentation?',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
});
contentSection.addSpacer({ height: '16px' });
contentSection.addRow(row => {
row.addSuggestionChips('contentHighlights', {
label: 'What did you find most valuable? (select up to 3)',
suggestions: [
{ id: 'insights', name: 'Expert insights' },
{ id: 'practical', name: 'Practical tips' },
{ id: 'case-studies', name: 'Case studies' },
{ id: 'networking', name: 'Networking opportunities' },
{ id: 'qa', name: 'Q&A sessions' },
{ id: 'demos', name: 'Live demos' },
{ id: 'resources', name: 'Shared resources' },
{ id: 'panels', name: 'Panel discussions' }
],
max: 3,
alignment: 'center'
});
});
// ============================================
// SECTION 4: Engagement & Interaction
// ============================================
const engagementSection = form.addSubform('engagement', {
title: 'Engagement & Interaction'
});
engagementSection.addRow(row => {
row.addRadioButton('participationLevel', {
label: 'How would you describe your participation?',
options: [
{ id: 'active', name: 'Actively participated (chat, Q&A, polls)' },
{ id: 'moderate', name: 'Moderately participated' },
{ id: 'passive', name: 'Mostly watched/listened' },
{ id: 'multitasking', name: 'Attended while multitasking' }
],
orientation: 'vertical'
});
});
engagementSection.addRow(row => {
row.addMatrixQuestion('interactionRating', {
label: 'Rate the interactive elements:',
rows: [
{ id: 'chat', label: 'Chat functionality' },
{ id: 'qa', label: 'Q&A sessions' },
{ id: 'polls', label: 'Polls/surveys during event' },
{ id: 'networking', label: 'Networking opportunities' },
{ id: 'breakouts', label: 'Breakout sessions (if applicable)' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'okay', label: 'Okay' },
{ id: 'good', label: 'Good' },
{ id: 'great', label: 'Great' },
{ id: 'na', label: 'N/A' }
],
fullWidth: true
});
});
engagementSection.addRow(row => {
row.addThumbRating('engagedEnough', {
label: 'Did you feel engaged throughout the event?',
showLabels: true,
upLabel: 'Yes, engaged',
downLabel: 'No, lost interest',
alignment: 'center'
});
});
// ============================================
// SECTION 5: NPS & Recommendations
// ============================================
const npsSection = form.addSubform('recommendation', {
title: 'Recommendation',
customStyles: () => {
const nps = npsSection.ratingScale('npsScore')?.npsCategory();
if (nps === 'promoter') return { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' };
if (nps === 'detractor') return { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' };
return {};
}
});
npsSection.addRow(row => {
row.addRatingScale('npsScore', {
label: 'How likely are you to recommend our virtual events to a colleague?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
isRequired: true
});
});
npsSection.addRow(row => {
row.addTextarea('npsReason', {
label: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'Fantastic! What made this event stand out?';
if (category === 'passive') return 'Thanks! What would make it a 9 or 10?';
if (category === 'detractor') return 'We appreciate your honesty. What could we improve?';
return 'Tell us more about your rating';
},
placeholder: 'Your feedback helps us improve...',
rows: 3,
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
});
// ============================================
// SECTION 6: Future Events
// ============================================
const futureSection = form.addSubform('future', {
title: 'Future Events',
isVisible: () => overallSection.emojiRating('quickRating')?.value() !== null
});
futureSection.addRow(row => {
row.addRadioButton('futureInterest', {
label: 'Would you attend our future virtual events?',
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: 'No' }
],
orientation: 'horizontal'
});
});
futureSection.addRow(row => {
row.addCheckboxList('topicInterests', {
label: 'What topics would you like to see in future events?',
options: [
{ id: 'industry-trends', name: 'Industry trends' },
{ id: 'best-practices', name: 'Best practices' },
{ id: 'case-studies', name: 'Case studies' },
{ id: 'hands-on', name: 'Hands-on workshops' },
{ id: 'networking', name: 'Networking sessions' },
{ id: 'expert-panels', name: 'Expert panels' }
],
orientation: 'vertical'
});
});
futureSection.addSpacer({ height: '16px' });
futureSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'Any other suggestions for future virtual events?',
placeholder: 'Topics, format, timing, platform preferences...',
rows: 3
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => {
const tech = techSection.starRating('overallTechRating')?.value();
const content = contentSection.starRating('contentQuality')?.value();
return tech !== null && tech !== undefined && content !== null && content !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overall = overallSection.emojiRating('quickRating')?.value();
const techRating = techSection.starRating('overallTechRating')?.value();
const contentRating = contentSection.starRating('contentQuality')?.value();
const nps = npsSection.ratingScale('npsScore')?.value();
const npsCategory = npsSection.ratingScale('npsScore')?.npsCategory();
const attendance = overallSection.slider('attendanceTime')?.value();
const highlights = contentSection.suggestionChips('contentHighlights')?.value() || [];
const moodLabels: Record<string, string> = {
'very-bad': 'Very Unsatisfied',
'bad': 'Unsatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
let summary = 'Virtual Event Feedback Summary\n';
summary += '═'.repeat(35) + '\n\n';
if (overall) {
summary += `Overall Experience: ${moodLabels[overall] || overall}\n`;
}
if (attendance !== null && attendance !== undefined) {
summary += `Attendance: ${attendance}% of event\n`;
}
if (techRating) {
summary += `Technical Quality: ${'★'.repeat(techRating)}${'☆'.repeat(5 - techRating)} (${techRating}/5)\n`;
}
if (contentRating) {
summary += `Content Quality: ${'★'.repeat(contentRating)}${'☆'.repeat(5 - contentRating)} (${contentRating}/5)\n`;
}
if (nps !== null && nps !== undefined) {
summary += `NPS Score: ${nps}/10 (${npsCategory})\n`;
}
if (highlights.length > 0) {
summary += `\nMost Valued: ${highlights.length} aspects selected`;
}
return summary;
},
customStyles: {
padding: '16px',
borderRadius: '8px',
backgroundColor: '#f5f3ff',
borderLeft: '4px solid #7c3aed',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Event Feedback',
isVisible: () => {
const tech = techSection.starRating('overallTechRating')?.value();
const content = contentSection.starRating('contentQuality')?.value();
return tech !== null && content !== null;
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your feedback!',
message: 'Your insights help us create better virtual events. We appreciate you taking the time to share your experience with us.'
});
}