export function newsletterFeedbackSurvey(form: FormTs) {
// Newsletter Engagement Survey - Quick feedback for email subscribers
// Demonstrates: ThumbRating, StarRating, EmojiRating, CheckboxList, conditional visibility, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Newsletter Feedback',
computedValue: () => 'Help us create content you love. Takes less than 60 seconds!',
customStyles: {
background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Quick Rating
// ============================================
const quickSection = form.addSubform('quickSection', {
title: 'Quick Rating'
});
quickSection.addRow(row => {
row.addThumbRating('overallThumb', {
label: 'Did you find today\'s newsletter valuable?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, loved it!',
downLabel: 'Not really',
alignment: 'center'
});
});
quickSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'How would you rate the content quality?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true,
isVisible: () => quickSection.thumbRating('overallThumb')?.value() !== null
});
});
// ============================================
// SECTION 2: Content Satisfaction (Positive Feedback)
// ============================================
const positiveSection = form.addSubform('positiveSection', {
title: 'What You Loved',
isVisible: () => quickSection.thumbRating('overallThumb')?.value() === 'up',
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '8px' }
});
positiveSection.addRow(row => {
row.addEmojiRating('enjoymentLevel', {
label: 'How did reading the newsletter make you feel?',
preset: 'mood',
size: 'lg',
alignment: 'center',
showLabels: true
});
});
positiveSection.addRow(row => {
row.addSuggestionChips('favoriteAspects', {
label: 'What did you like most? (Select all that apply)',
suggestions: [
{ id: 'insights', name: 'Valuable insights' },
{ id: 'practical', name: 'Practical tips' },
{ id: 'writing', name: 'Writing style' },
{ id: 'length', name: 'Perfect length' },
{ id: 'visuals', name: 'Great visuals' },
{ id: 'links', name: 'Useful links' },
{ id: 'timely', name: 'Timely topics' },
{ id: 'unique', name: 'Unique perspective' }
],
alignment: 'center'
});
});
// ============================================
// SECTION 3: Improvement Areas (Negative Feedback)
// ============================================
const negativeSection = form.addSubform('negativeSection', {
title: 'How We Can Improve',
isVisible: () => quickSection.thumbRating('overallThumb')?.value() === 'down',
customStyles: { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' }
});
negativeSection.addRow(row => {
row.addCheckboxList('improvementAreas', {
label: 'What could we do better? (Select all that apply)',
options: [
{ id: 'too-long', name: 'Too long to read' },
{ id: 'too-short', name: 'Not enough depth' },
{ id: 'not-relevant', name: 'Topics not relevant to me' },
{ id: 'too-frequent', name: 'Sent too often' },
{ id: 'not-actionable', name: 'Not practical enough' },
{ id: 'poor-formatting', name: 'Hard to read/scan' },
{ id: 'too-salesy', name: 'Too promotional' },
{ id: 'boring', name: 'Content is boring' }
],
orientation: 'vertical'
});
});
negativeSection.addSpacer();
negativeSection.addRow(row => {
row.addTextarea('improvementSuggestions', {
label: 'What would make you look forward to our newsletter?',
placeholder: 'Your honest feedback helps us improve...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 4: Topic Preferences
// ============================================
const topicsSection = form.addSubform('topicsSection', {
title: 'Topic Preferences',
isVisible: () => quickSection.thumbRating('overallThumb')?.value() !== null
});
topicsSection.addRow(row => {
row.addMatrixQuestion('topicInterest', {
label: 'How interested are you in each topic area?',
rows: [
{ id: 'industry-news', label: 'Industry news & trends' },
{ id: 'how-to', label: 'How-to guides & tutorials' },
{ id: 'case-studies', label: 'Case studies & examples' },
{ id: 'interviews', label: 'Expert interviews' },
{ id: 'tools', label: 'Tools & resources' },
{ id: 'opinions', label: 'Opinions & analysis' }
],
columns: [
{ id: 'low', label: 'Low' },
{ id: 'medium', label: 'Medium' },
{ id: 'high', label: 'High' }
],
striped: true,
fullWidth: true
});
});
topicsSection.addSpacer();
topicsSection.addRow(row => {
row.addTextbox('topicSuggestion', {
label: 'Any specific topics you\'d like us to cover?',
placeholder: 'e.g., AI tools for productivity, remote work tips...'
});
});
// ============================================
// SECTION 5: Delivery Preferences
// ============================================
const deliverySection = form.addSubform('deliverySection', {
title: 'Delivery Preferences',
isVisible: () => quickSection.thumbRating('overallThumb')?.value() !== null
});
deliverySection.addRow(row => {
row.addRadioButton('frequencyPreference', {
label: 'How often would you like to receive our newsletter?',
options: [
{ id: 'daily', name: 'Daily' },
{ id: 'twice-week', name: 'Twice a week' },
{ id: 'weekly', name: 'Weekly (current)' },
{ id: 'biweekly', name: 'Every two weeks' },
{ id: 'monthly', name: 'Monthly' }
],
orientation: 'vertical'
});
});
deliverySection.addRow(row => {
row.addRatingScale('lengthPreference', {
label: 'Preferred newsletter length',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Shorter, quick reads',
highLabel: 'Longer, in-depth',
variant: 'segmented',
size: 'md'
});
});
// ============================================
// SECTION 6: Final Thoughts
// ============================================
const finalSection = form.addSubform('finalSection', {
title: () => {
const thumb = quickSection.thumbRating('overallThumb')?.value();
return thumb === 'up' ? 'Keep the Love Coming!' : 'Help Us Do Better';
},
isVisible: () => quickSection.thumbRating('overallThumb')?.value() !== null
});
finalSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend our newsletter to a colleague?',
showCategoryLabel: true,
showSegmentColors: true
});
});
finalSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: () => {
const category = finalSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'What would you tell a friend about our newsletter?';
if (category === 'detractor') return 'What\'s the one thing we should change?';
return 'Any other thoughts or suggestions?';
},
placeholder: 'Your feedback matters...',
rows: 2,
autoExpand: true,
isVisible: () => finalSection.ratingScale('npsScore')?.value() !== null
});
});
// ============================================
// SUMMARY
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Feedback Summary',
isVisible: () => {
const thumb = quickSection.thumbRating('overallThumb')?.value();
const stars = quickSection.starRating('contentQuality')?.value();
return thumb !== null && stars !== null;
}
});
summarySection.addRow(row => {
row.addTextPanel('summary', {
computedValue: () => {
const thumb = quickSection.thumbRating('overallThumb')?.value();
const stars = quickSection.starRating('contentQuality')?.value();
const nps = finalSection.ratingScale('npsScore')?.value();
const category = finalSection.ratingScale('npsScore')?.npsCategory();
const frequency = deliverySection.radioButton('frequencyPreference')?.value();
if (!thumb) return '';
let summary = thumb === 'up' ? '💜 Thanks for the Love!\n' : '📝 Thanks for Your Honesty!\n';
summary += '═'.repeat(25) + '\n\n';
summary += thumb === 'up' ? '👍 Overall: Valuable\n' : '👎 Overall: Needs improvement\n';
if (stars) {
summary += `⭐ Content Quality: ${stars}/5\n`;
}
if (nps !== null && nps !== undefined) {
const emoji = category === 'promoter' ? '🎉' : category === 'passive' ? '🤔' : '📝';
summary += `${emoji} Recommendation: ${nps}/10\n`;
}
if (frequency) {
const freqLabels: Record<string, string> = {
'daily': 'Daily',
'twice-week': 'Twice weekly',
'weekly': 'Weekly',
'biweekly': 'Biweekly',
'monthly': 'Monthly'
};
summary += `📅 Preferred Frequency: ${freqLabels[frequency] || frequency}\n`;
}
return summary;
},
customStyles: () => {
const thumb = quickSection.thumbRating('overallThumb')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (thumb === 'up') {
return { ...baseStyles, backgroundColor: '#f0fdf4', borderLeft: '4px solid #22c55e' };
}
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => quickSection.thumbRating('overallThumb')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const thumb = quickSection.thumbRating('overallThumb')?.value();
return thumb === 'up' ? 'Thanks for the Love!' : 'We Appreciate Your Honesty!';
},
message: () => {
const thumb = quickSection.thumbRating('overallThumb')?.value();
if (thumb === 'up') {
return 'Your positive feedback keeps us motivated! We\'ll keep delivering valuable content to your inbox.';
}
return 'Your honest feedback helps us improve. We\'ll work on making our newsletter better for you!';
}
});
}