export function webinarFeedback(form: FormTs) {
// Webinar Feedback - Virtual event evaluation form
// Demonstrates: RatingScale, ThumbRating, Timepicker, Slider, dynamic labels, multi-section
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Webinar Feedback',
computedValue: () => 'Help us improve our virtual events',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Webinar Details
// ============================================
const webinarDetails = form.addSubform('webinarDetails', {
title: 'Webinar Details',
customStyles: { backgroundColor: '#f5f3ff', padding: '16px', borderRadius: '8px' }
});
webinarDetails.addRow(row => {
row.addDropdown('webinarType', {
label: 'Type of Webinar',
options: [
{ id: 'educational', name: 'Educational/Training' },
{ id: 'product_demo', name: 'Product Demo' },
{ id: 'panel', name: 'Panel Discussion' },
{ id: 'workshop', name: 'Interactive Workshop' },
{ id: 'thought_leadership', name: 'Thought Leadership' },
{ id: 'ama', name: 'Ask Me Anything (AMA)' }
],
placeholder: 'Select webinar type'
}, '1fr');
row.addDropdown('attendanceType', {
label: 'How did you attend?',
options: [
{ id: 'live', name: 'Live (Real-time)' },
{ id: 'recording', name: 'Watched Recording' },
{ id: 'partial_live', name: 'Joined Late/Left Early' }
],
placeholder: 'Select attendance type'
}, '1fr');
});
webinarDetails.addRow(row => {
row.addDatepicker('webinarDate', {
label: 'Date of Webinar',
maxDate: new Date().toISOString()
}, '1fr');
row.addTimepicker('joinTime', {
label: 'Approximate Join Time',
tooltip: 'When did you join the webinar?'
}, '1fr');
});
webinarDetails.addRow(row => {
row.addRadioButton('registrationSource', {
label: 'How did you hear about this webinar?',
options: [
{ id: 'email', name: 'Email invitation' },
{ id: 'social', name: 'Social media' },
{ id: 'colleague', name: 'Colleague/Friend' },
{ id: 'website', name: 'Company website' },
{ id: 'other', name: 'Other' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 2: Overall Experience
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Experience',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
overallSection.addRow(row => {
row.addEmojiRating('overallMood', {
label: 'How would you rate your overall webinar experience?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall Webinar Rating',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
// ============================================
// SECTION 3: Content Quality
// ============================================
const contentSection = form.addSubform('contentSection', {
title: 'Content Quality',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#faf5ff' }
});
contentSection.addRow(row => {
row.addRatingScale('contentRelevance', {
preset: 'likert-5',
label: 'The content was relevant to my needs',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
size: 'md'
});
});
contentSection.addRow(row => {
row.addRatingScale('contentDepth', {
preset: 'likert-5',
label: 'The content had the right level of depth',
lowLabel: 'Too Basic',
highLabel: 'Too Advanced',
size: 'md'
});
});
contentSection.addRow(row => {
row.addRatingScale('contentClarity', {
preset: 'likert-5',
label: 'The content was clear and easy to understand',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
size: 'md'
});
});
contentSection.addRow(row => {
row.addThumbRating('metExpectations', {
label: 'Did the webinar meet your expectations?',
showLabels: true,
upLabel: 'Yes, met/exceeded',
downLabel: 'No, fell short',
alignment: 'left'
});
});
// Follow-up for unmet expectations
contentSection.addRow(row => {
row.addTextarea('expectationGap', {
label: 'What were you hoping to learn that wasn\'t covered?',
placeholder: 'Help us understand what we missed...',
rows: 2,
autoExpand: true,
isVisible: () => contentSection.thumbRating('metExpectations')?.value() === 'down'
});
});
// ============================================
// SECTION 4: Speaker/Presenter Evaluation
// ============================================
const speakerSection = form.addSubform('speakerSection', {
title: 'Speaker/Presenter',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
speakerSection.addRow(row => {
row.addStarRating('speakerKnowledge', {
label: 'Subject Matter Expertise',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('speakerClarity', {
label: 'Presentation Clarity',
maxStars: 5,
size: 'md'
}, '1fr');
});
speakerSection.addRow(row => {
row.addStarRating('speakerEngagement', {
label: 'Audience Engagement',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('speakerPace', {
label: 'Presentation Pace',
maxStars: 5,
size: 'md',
tooltip: '5 stars = Perfect pace'
}, '1fr');
});
speakerSection.addRow(row => {
row.addRatingScale('speakerEnthusiasm', {
preset: 'likert-5',
label: 'The speaker was enthusiastic and engaging',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
size: 'md'
});
});
// ============================================
// SECTION 5: Technical Experience
// ============================================
const technicalSection = form.addSubform('technicalSection', {
title: 'Technical Experience',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#f0f9ff' }
});
technicalSection.addRow(row => {
row.addStarRating('audioQuality', {
label: 'Audio Quality',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('videoQuality', {
label: 'Video/Visual Quality',
maxStars: 5,
size: 'md'
}, '1fr');
});
technicalSection.addRow(row => {
row.addStarRating('platformEase', {
label: 'Platform Ease of Use',
maxStars: 5,
size: 'md'
}, '1fr');
row.addStarRating('slidesQuality', {
label: 'Slides/Visuals Quality',
maxStars: 5,
size: 'md'
}, '1fr');
});
technicalSection.addRow(row => {
row.addThumbRating('hadTechIssues', {
label: 'Did you experience any technical issues?',
showLabels: true,
upLabel: 'Yes, had issues',
downLabel: 'No issues',
alignment: 'left'
});
});
technicalSection.addRow(row => {
row.addCheckboxList('techIssueTypes', {
label: 'What technical issues did you experience?',
options: [
{ id: 'audio_choppy', name: 'Audio was choppy/unclear' },
{ id: 'video_frozen', name: 'Video froze/lagged' },
{ id: 'connection', name: 'Connection problems' },
{ id: 'login', name: 'Trouble logging in' },
{ id: 'screen_share', name: 'Screen share issues' },
{ id: 'chat', name: 'Chat not working' }
],
orientation: 'vertical',
isVisible: () => technicalSection.thumbRating('hadTechIssues')?.value() === 'up'
});
});
// ============================================
// SECTION 6: Q&A and Interaction
// ============================================
const interactionSection = form.addSubform('interactionSection', {
title: 'Q&A and Interaction',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
interactionSection.addRow(row => {
row.addRadioButton('askedQuestion', {
label: 'Did you ask a question during the webinar?',
options: [
{ id: 'yes_answered', name: 'Yes, and it was answered' },
{ id: 'yes_not_answered', name: 'Yes, but not answered' },
{ id: 'no', name: 'No' }
],
orientation: 'horizontal'
});
});
interactionSection.addRow(row => {
row.addRatingScale('qaQuality', {
preset: 'likert-5',
label: 'The Q&A session was valuable',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
size: 'md',
isVisible: () => {
const asked = interactionSection.radioButton('askedQuestion')?.value();
return asked === 'yes_answered' || asked === 'yes_not_answered';
}
});
});
interactionSection.addRow(row => {
row.addSlider('interactionLevel', {
label: 'How interactive was the webinar?',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
});
});
// ============================================
// SECTION 7: Duration & Timing
// ============================================
const timingSection = form.addSubform('timingSection', {
title: 'Duration & Timing',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#fefce8' }
});
timingSection.addRow(row => {
row.addRadioButton('durationFeel', {
label: 'How did you feel about the webinar length?',
options: [
{ id: 'too_short', name: 'Too short' },
{ id: 'just_right', name: 'Just right' },
{ id: 'too_long', name: 'Too long' }
],
orientation: 'horizontal'
});
});
timingSection.addRow(row => {
row.addRadioButton('timeConvenience', {
label: 'Was the scheduled time convenient for you?',
options: [
{ id: 'very_convenient', name: 'Very convenient' },
{ id: 'somewhat', name: 'Somewhat convenient' },
{ id: 'inconvenient', name: 'Inconvenient' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 8: Value & Takeaways
// ============================================
const valueSection = form.addSubform('valueSection', {
title: 'Value & Takeaways',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', backgroundColor: '#f0fdf4' }
});
valueSection.addRow(row => {
row.addRatingScale('actionableInsights', {
preset: 'likert-5',
label: 'I gained actionable insights from this webinar',
lowLabel: 'Strongly Disagree',
highLabel: 'Strongly Agree',
size: 'md'
});
});
valueSection.addRow(row => {
row.addThumbRating('wouldApply', {
label: 'Will you apply what you learned?',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'left'
});
});
valueSection.addRow(row => {
row.addTextarea('keyTakeaway', {
label: 'What was your biggest takeaway?',
placeholder: 'Share the most valuable insight you gained...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 9: Topics of Interest
// ============================================
const topicsSection = form.addSubform('topicsSection', {
title: 'Future Topics',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
topicsSection.addRow(row => {
row.addSuggestionChips('interestedTopics', {
label: 'What topics would you like in future webinars?',
suggestions: [
{ id: 'best_practices', name: 'Best Practices' },
{ id: 'case_studies', name: 'Case Studies' },
{ id: 'advanced', name: 'Advanced Topics' },
{ id: 'beginner', name: 'Beginner Guides' },
{ id: 'trends', name: 'Industry Trends' },
{ id: 'tools', name: 'Tools & Technology' },
{ id: 'qa', name: 'Q&A Sessions' },
{ id: 'hands_on', name: 'Hands-on Workshops' }
],
max: 4,
alignment: 'center'
});
});
topicsSection.addRow(row => {
row.addTextarea('topicSuggestions', {
label: 'Any specific topics you\'d like us to cover?',
placeholder: 'Your suggestions help shape our content...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 10: Recommendation
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Would You Recommend?',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: () => {
const nps = recommendSection.ratingScale('npsScore')?.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('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend our webinars to a colleague?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
recommendSection.addRow(row => {
row.addCheckbox('attendFuture', {
label: 'I would attend future webinars from this organization'
});
});
// ============================================
// SECTION 11: Additional Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Additional Feedback',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
feedbackSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback or suggestions?',
placeholder: 'We value all your thoughts...',
rows: 3,
autoExpand: true
});
});
feedbackSection.addRow(row => {
row.addCheckbox('allowContact', {
label: 'You may contact me for follow-up'
});
});
feedbackSection.addRow(row => {
row.addEmail('contactEmail', {
label: 'Email Address',
placeholder: 'your@email.com',
isVisible: () => feedbackSection.checkbox('allowContact')?.value() === true,
isRequired: () => feedbackSection.checkbox('allowContact')?.value() === true
});
});
// ============================================
// SUMMARY SECTION
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Feedback Summary',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overall = overallSection.starRating('overallRating')?.value();
const nps = recommendSection.ratingScale('npsScore')?.value();
const npsCategory = recommendSection.ratingScale('npsScore')?.npsCategory();
const speakerKnowledge = speakerSection.starRating('speakerKnowledge')?.value();
const hadTechIssues = technicalSection.thumbRating('hadTechIssues')?.value();
const wouldApply = valueSection.thumbRating('wouldApply')?.value();
if (overall === null || overall === undefined) return '';
let emoji = overall >= 4 ? '🎓' : overall >= 3 ? '📺' : '😕';
let summary = `${emoji} Webinar Feedback Summary\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `⭐ Overall Rating: ${overall}/5 stars\n`;
if (speakerKnowledge) {
summary += `🎤 Speaker: ${speakerKnowledge}/5 stars\n`;
}
if (hadTechIssues === 'up') {
summary += `⚠️ Technical issues reported\n`;
} else if (hadTechIssues === 'down') {
summary += `✅ No technical issues\n`;
}
if (wouldApply === 'up') {
summary += `💡 Will apply learnings\n`;
}
if (nps !== null && nps !== undefined) {
summary += `\n📊 Recommendation: ${nps}/10`;
if (npsCategory) {
summary += ` (${npsCategory.charAt(0).toUpperCase()}${npsCategory.slice(1)})`;
}
}
return summary;
},
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating !== null && rating !== undefined && rating >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (rating !== null && rating !== undefined && rating >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (rating !== null && rating !== undefined) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return baseStyles;
}
});
});
// ============================================
// 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 create better webinar experiences. We look forward to seeing you at our next event!'
});
}