export function videoContentFeedbackForm(form: FormTs) {
// Video Content Feedback Form
// Demonstrates: StarRating, EmojiRating, RatingScale, SuggestionChips, Slider, CheckboxList, ThumbRating
// Focus: Content creator audience feedback with engagement metrics
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Help Us Create Better Content!',
computedValue: () => 'Your feedback shapes our future videos. Tell us what you think!',
customStyles: {
backgroundColor: '#dc2626',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Impression
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Impression',
customStyles: { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '12px' }
});
overallSection.addRow(row => {
row.addEmojiRating('overallFeeling', {
label: 'How did this video make you feel?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'Content Quality - Was the information valuable?',
maxStars: 5,
size: 'lg',
showCounter: true,
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addStarRating('productionQuality', {
label: 'Production Quality - Video and audio quality',
maxStars: 5,
size: 'lg',
showCounter: true
});
});
// ============================================
// SECTION 2: Engagement Level
// ============================================
const engagementSection = form.addSubform('engagementSection', {
title: 'Engagement',
isVisible: () => !!overallSection.emojiRating('overallFeeling')?.value()
});
engagementSection.addRow(row => {
row.addRatingScale('engagementLevel', {
label: 'How engaged were you while watching?',
preset: 'likert-5',
lowLabel: 'Not engaged',
highLabel: 'Fully engaged',
variant: 'segmented',
size: 'lg'
});
});
engagementSection.addRow(row => {
row.addRadioButton('watchCompletion', {
label: 'How much of the video did you watch?',
options: [
{ id: 'all', name: 'Watched it all' },
{ id: 'most', name: 'Most of it (75%+)' },
{ id: 'half', name: 'About half' },
{ id: 'beginning', name: 'Just the beginning' },
{ id: 'skipped', name: 'Skipped around' }
],
orientation: 'vertical'
});
});
// Dynamic follow-up for incomplete viewing
engagementSection.addSpacer();
engagementSection.addRow(row => {
row.addTextarea('skipReason', {
label: () => {
const completion = engagementSection.radioButton('watchCompletion')?.value();
if (completion === 'beginning') return 'What made you stop watching?';
if (completion === 'skipped') return 'What parts did you skip and why?';
return 'Why didn\'t you finish the video?';
},
placeholder: 'Help us understand what we can improve...',
rows: 2,
autoExpand: true,
isVisible: () => {
const completion = engagementSection.radioButton('watchCompletion')?.value();
return completion === 'half' || completion === 'beginning' || completion === 'skipped';
}
});
});
// ============================================
// SECTION 3: What You Liked
// ============================================
const likesSection = form.addSubform('likesSection', {
title: 'What Did You Like?',
isVisible: () => {
const feeling = overallSection.emojiRating('overallFeeling')?.value();
return feeling === 'happy' || feeling === 'excited' || feeling === 'neutral';
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
likesSection.addRow(row => {
row.addSuggestionChips('likedAspects', {
label: 'Select what you enjoyed (pick up to 4)',
suggestions: [
{ id: 'topic', name: 'Topic choice' },
{ id: 'delivery', name: 'Presentation style' },
{ id: 'editing', name: 'Editing & visuals' },
{ id: 'audio', name: 'Audio quality' },
{ id: 'pacing', name: 'Pacing & flow' },
{ id: 'humor', name: 'Humor & personality' },
{ id: 'depth', name: 'Depth of content' },
{ id: 'examples', name: 'Examples & demos' },
{ id: 'thumbnail', name: 'Thumbnail & title' },
{ id: 'length', name: 'Video length' }
],
max: 4,
alignment: 'left'
});
});
// ============================================
// SECTION 4: Areas for Improvement
// ============================================
const improvementSection = form.addSubform('improvementSection', {
title: 'What Could Be Better?',
isVisible: () => {
const feeling = overallSection.emojiRating('overallFeeling')?.value();
const quality = overallSection.starRating('contentQuality')?.value();
return feeling === 'sad' || feeling === 'down' || feeling === 'neutral' || (quality !== null && quality !== undefined && quality <= 3);
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
improvementSection.addRow(row => {
row.addSuggestionChips('improvementAreas', {
label: 'What needs improvement?',
suggestions: [
{ id: 'topic', name: 'Topic choice' },
{ id: 'clarity', name: 'Clearer explanation' },
{ id: 'editing', name: 'Better editing' },
{ id: 'audio', name: 'Audio quality' },
{ id: 'pacing', name: 'Faster pacing' },
{ id: 'slower', name: 'Slower pacing' },
{ id: 'shorter', name: 'Shorter video' },
{ id: 'longer', name: 'More depth' },
{ id: 'visuals', name: 'Better visuals' },
{ id: 'examples', name: 'More examples' }
],
alignment: 'left'
});
});
// ============================================
// SECTION 5: Video Length Preference
// ============================================
const lengthSection = form.addSubform('lengthSection', {
title: 'Video Length Preferences',
isVisible: () => !!overallSection.emojiRating('overallFeeling')?.value()
});
lengthSection.addRow(row => {
row.addSlider('idealLength', {
label: 'What\'s your ideal video length for this type of content?',
min: 1,
max: 60,
step: 1,
defaultValue: 15,
showValue: true,
unit: 'minutes'
});
});
lengthSection.addRow(row => {
row.addTextPanel('lengthNote', {
computedValue: () => {
const length = lengthSection.slider('idealLength')?.value();
if (!length) return '';
if (length <= 5) return 'Quick & snappy - perfect for shorts!';
if (length <= 15) return 'Sweet spot for most viewers';
if (length <= 30) return 'Great for in-depth content';
return 'Long-form deep dives - for dedicated fans!';
},
customStyles: {
padding: '8px 12px',
backgroundColor: '#f3f4f6',
borderRadius: '6px',
fontStyle: 'italic',
textAlign: 'center'
},
isVisible: () => !!lengthSection.slider('idealLength')?.value()
});
});
// ============================================
// SECTION 6: Future Content
// ============================================
const futureSection = form.addSubform('futureSection', {
title: 'What Do You Want to See Next?',
isVisible: () => !!overallSection.emojiRating('overallFeeling')?.value()
});
futureSection.addRow(row => {
row.addCheckboxList('topicInterests', {
label: 'Which topics interest you for future videos?',
options: [
{ id: 'tutorials', name: 'Tutorials & How-tos' },
{ id: 'reviews', name: 'Reviews & Comparisons' },
{ id: 'news', name: 'News & Updates' },
{ id: 'behind-scenes', name: 'Behind the Scenes' },
{ id: 'interviews', name: 'Interviews & Collabs' },
{ id: 'challenges', name: 'Challenges & Fun' },
{ id: 'deep-dives', name: 'Deep Dives & Analysis' },
{ id: 'qa', name: 'Q&A Sessions' }
],
orientation: 'vertical'
});
});
futureSection.addSpacer();
futureSection.addRow(row => {
row.addTextarea('topicSuggestions', {
label: 'Any specific video ideas you\'d like to see?',
placeholder: 'Tell us what topics you want covered...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 7: Sharing & Recommendation
// ============================================
const shareSection = form.addSubform('shareSection', {
title: 'Would You Share?',
isVisible: () => !!overallSection.emojiRating('overallFeeling')?.value()
});
shareSection.addRow(row => {
row.addThumbRating('wouldShare', {
label: 'Would you share this video with a friend?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, definitely!',
downLabel: 'Probably not',
alignment: 'center'
});
});
shareSection.addRow(row => {
row.addRatingScale('subscribeIntent', {
label: 'How likely are you to subscribe (or stay subscribed)?',
preset: 'nps',
showSegmentColors: true,
showCategoryLabel: true,
isVisible: () => !!shareSection.thumbRating('wouldShare')?.value()
});
});
// ============================================
// SECTION 8: Additional Feedback
// ============================================
const additionalSection = form.addSubform('additionalSection', {
title: 'Final Thoughts',
isVisible: () => !!overallSection.emojiRating('overallFeeling')?.value()
});
additionalSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: 'Any other thoughts or suggestions?',
placeholder: 'Share what\'s on your mind...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => !!overallSection.starRating('contentQuality')?.value()
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const feeling = overallSection.emojiRating('overallFeeling')?.value();
const contentQuality = overallSection.starRating('contentQuality')?.value();
const productionQuality = overallSection.starRating('productionQuality')?.value();
const engagement = engagementSection.ratingScale('engagementLevel')?.value();
const wouldShare = shareSection.thumbRating('wouldShare')?.value();
const idealLength = lengthSection.slider('idealLength')?.value();
if (!feeling) return '';
const moodEmojis: Record<string, string> = {
'sad': '😢', 'down': '😔', 'neutral': '😐', 'happy': '😊', 'excited': '🤩'
};
let summary = `${moodEmojis[feeling] || '🎬'} Your Video Feedback\n`;
summary += '━'.repeat(28) + '\n\n';
if (contentQuality) summary += `Content Quality: ${'★'.repeat(contentQuality)}${'☆'.repeat(5 - contentQuality)}\n`;
if (productionQuality) summary += `Production: ${'★'.repeat(productionQuality)}${'☆'.repeat(5 - productionQuality)}\n`;
if (engagement) summary += `Engagement: ${engagement}/5\n`;
if (idealLength) summary += `Preferred Length: ${idealLength} min\n`;
if (wouldShare) summary += `Would Share: ${wouldShare === 'up' ? '👍 Yes' : '👎 No'}\n`;
return summary;
},
customStyles: () => {
const feeling = overallSection.emojiRating('overallFeeling')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (feeling === 'happy' || feeling === 'excited') {
return { ...baseStyles, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
}
if (feeling === 'sad' || feeling === 'down') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f3f4f6', borderLeft: '4px solid #6b7280' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => !!overallSection.emojiRating('overallFeeling')?.value()
});
form.configureCompletionScreen({
type: 'text',
title: 'Thanks for Your Feedback!',
message: 'Your input helps us create better content for you. Don\'t forget to subscribe and turn on notifications!'
});
}