export function contentFeedback(form: FormTs) {
// Content/Blog/Article Feedback - Quick reader feedback form
// Demonstrates: ThumbRating, StarRating, EmojiRating, Conditional Visibility, SuggestionChips
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Was This Article Helpful?',
computedValue: () => 'Your feedback helps us create better content for you.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '20px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Quick Feedback
// ============================================
const quickSection = form.addSubform('quickSection', {
title: 'Quick Rating'
});
quickSection.addRow(row => {
row.addThumbRating('helpfulness', {
label: 'Was this article helpful?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, helpful!',
downLabel: 'Not really',
alignment: 'center'
});
});
// ============================================
// SECTION 2: Positive Feedback Path
// ============================================
const positiveSection = form.addSubform('positiveSection', {
title: 'Great to Hear!',
isVisible: () => quickSection.thumbRating('helpfulness')?.value() === 'up',
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
positiveSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'How would you rate the overall quality?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
positiveSection.addRow(row => {
row.addSuggestionChips('whatWorked', {
label: 'What did you like most? (Select all that apply)',
suggestions: [
{ id: 'clear', name: 'Clear & Easy to Understand' },
{ id: 'practical', name: 'Practical Tips' },
{ id: 'comprehensive', name: 'Comprehensive Coverage' },
{ id: 'examples', name: 'Great Examples' },
{ id: 'well-structured', name: 'Well Structured' },
{ id: 'up-to-date', name: 'Up-to-Date Info' },
{ id: 'unique', name: 'Unique Perspective' },
{ id: 'actionable', name: 'Actionable Advice' }
],
max: 4,
alignment: 'left'
});
});
positiveSection.addRow(row => {
row.addRadioButton('wouldShare', {
label: 'Would you share this article with others?',
options: [
{ id: 'definitely', name: 'Definitely!' },
{ id: 'probably', name: 'Probably' },
{ id: 'maybe', name: 'Maybe' },
{ id: 'no', name: 'Probably not' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 3: Negative Feedback Path
// ============================================
const negativeSection = form.addSubform('negativeSection', {
title: 'Help Us Improve',
isVisible: () => quickSection.thumbRating('helpfulness')?.value() === 'down',
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
negativeSection.addRow(row => {
row.addSuggestionChips('issues', {
label: 'What was the problem? (Select all that apply)',
suggestions: [
{ id: 'not-relevant', name: 'Not What I Was Looking For' },
{ id: 'too-basic', name: 'Too Basic' },
{ id: 'too-advanced', name: 'Too Advanced' },
{ id: 'outdated', name: 'Outdated Information' },
{ id: 'unclear', name: 'Hard to Understand' },
{ id: 'incomplete', name: 'Missing Information' },
{ id: 'too-long', name: 'Too Long' },
{ id: 'errors', name: 'Contains Errors' }
],
alignment: 'left'
});
});
negativeSection.addSpacer();
negativeSection.addRow(row => {
row.addTextarea('whatMissing', {
label: 'What information were you looking for?',
placeholder: 'Tell us what would have made this article more helpful...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 4: Content Depth Assessment
// ============================================
const depthSection = form.addSubform('depthSection', {
title: 'Content Depth',
isVisible: () => quickSection.thumbRating('helpfulness')?.value() !== null
});
depthSection.addRow(row => {
row.addRadioButton('detailLevel', {
label: 'How was the level of detail?',
options: [
{ id: 'too-shallow', name: 'Too shallow - needed more depth' },
{ id: 'just-right', name: 'Just right' },
{ id: 'too-detailed', name: 'Too detailed - wanted a quick overview' }
],
orientation: 'vertical'
});
});
depthSection.addRow(row => {
row.addRadioButton('foundAnswer', {
label: 'Did this article answer your question?',
options: [
{ id: 'completely', name: 'Yes, completely' },
{ id: 'partially', name: 'Partially' },
{ id: 'no', name: 'No' },
{ id: 'no-question', name: 'I was just browsing' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 5: Topic Interests
// ============================================
const topicsSection = form.addSubform('topicsSection', {
title: 'What Else Would You Like to Read?',
isVisible: () => quickSection.thumbRating('helpfulness')?.value() !== null
});
topicsSection.addRow(row => {
row.addCheckboxList('interestedTopics', {
label: 'Select topics you\'d like us to cover more',
options: [
{ id: 'tutorials', name: 'Step-by-step Tutorials' },
{ id: 'case-studies', name: 'Case Studies & Examples' },
{ id: 'tips', name: 'Quick Tips & Tricks' },
{ id: 'deep-dives', name: 'In-depth Analysis' },
{ id: 'comparisons', name: 'Comparisons & Reviews' },
{ id: 'industry-news', name: 'Industry News & Trends' },
{ id: 'interviews', name: 'Expert Interviews' },
{ id: 'beginner', name: 'Beginner-friendly Content' }
],
orientation: 'vertical',
max: 3
});
});
topicsSection.addSpacer();
topicsSection.addRow(row => {
row.addTextbox('topicSuggestion', {
label: 'Suggest a topic for a future article (optional)',
placeholder: 'e.g., "How to get started with..."'
});
});
// ============================================
// SECTION 6: Reader Intent
// ============================================
const intentSection = form.addSubform('intentSection', {
title: 'About Your Visit',
isVisible: () => quickSection.thumbRating('helpfulness')?.value() !== null
});
intentSection.addRow(row => {
row.addRadioButton('visitorType', {
label: 'How would you describe yourself?',
options: [
{ id: 'first-time', name: 'First-time visitor' },
{ id: 'occasional', name: 'Occasional reader' },
{ id: 'regular', name: 'Regular reader' },
{ id: 'subscriber', name: 'Email subscriber' }
],
orientation: 'horizontal'
});
});
intentSection.addRow(row => {
row.addDropdown('howFound', {
label: 'How did you find this article?',
placeholder: 'Select...',
options: [
{ id: 'search', name: 'Search Engine (Google, Bing)' },
{ id: 'social', name: 'Social Media' },
{ id: 'email', name: 'Email Newsletter' },
{ id: 'referral', name: 'Another Website/Blog' },
{ id: 'direct', name: 'Typed URL/Bookmark' },
{ id: 'internal', name: 'Link from Another Article' },
{ id: 'other', name: 'Other' }
]
});
});
// ============================================
// SECTION 7: Subscribe Option
// ============================================
const subscribeSection = form.addSubform('subscribeSection', {
title: 'Stay Updated',
isVisible: () => {
const helpful = quickSection.thumbRating('helpfulness')?.value();
const visitor = intentSection.radioButton('visitorType')?.value();
return helpful === 'up' && visitor !== 'subscriber';
}
});
subscribeSection.addRow(row => {
row.addCheckbox('wantUpdates', {
label: 'I\'d like to receive new articles via email'
});
});
subscribeSection.addRow(row => {
row.addEmail('subscriberEmail', {
label: 'Email Address',
placeholder: 'your@email.com',
isVisible: () => subscribeSection.checkbox('wantUpdates')?.value() === true,
isRequired: () => subscribeSection.checkbox('wantUpdates')?.value() === true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback',
isVisible: () => quickSection.thumbRating('helpfulness')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const helpful = quickSection.thumbRating('helpfulness')?.value();
const quality = positiveSection.starRating('contentQuality')?.value();
const liked = positiveSection.suggestionChips('whatWorked')?.value() || [];
const issues = negativeSection.suggestionChips('issues')?.value() || [];
const detail = depthSection.radioButton('detailLevel')?.value();
const answered = depthSection.radioButton('foundAnswer')?.value();
const visitor = intentSection.radioButton('visitorType')?.value();
const wouldShare = positiveSection.radioButton('wouldShare')?.value();
if (!helpful) return '';
let summary = '';
if (helpful === 'up') {
summary += '👍 You found this article helpful!\n';
summary += `${'─'.repeat(30)}\n\n`;
if (quality) {
summary += `⭐ Quality Rating: ${quality}/5 stars\n`;
}
if (liked.length > 0) {
summary += `✨ Liked: ${liked.length} aspects\n`;
}
if (wouldShare) {
const shareLabels: Record<string, string> = {
'definitely': '📤 Would definitely share',
'probably': '📤 Would probably share',
'maybe': '🤔 Might share',
'no': '📴 Unlikely to share'
};
summary += `\n${shareLabels[wouldShare] || ''}`;
}
} else {
summary += '👎 This article needs improvement\n';
summary += `${'─'.repeat(30)}\n\n`;
if (issues.length > 0) {
summary += `⚠️ Issues: ${issues.length} identified\n`;
}
}
if (detail) {
const detailLabels: Record<string, string> = {
'too-shallow': '📉 Detail: Too shallow',
'just-right': '✅ Detail: Just right',
'too-detailed': '📈 Detail: Too detailed'
};
summary += `\n${detailLabels[detail] || ''}`;
}
if (answered) {
const answerLabels: Record<string, string> = {
'completely': '\n✅ Answered question completely',
'partially': '\n⚡ Partially answered',
'no': '\n❌ Did not answer question',
'no-question': '\n📖 Was just browsing'
};
summary += answerLabels[answered] || '';
}
if (visitor) {
const visitorLabels: Record<string, string> = {
'first-time': '\n\n👋 First-time visitor',
'occasional': '\n\n📚 Occasional reader',
'regular': '\n\n💚 Regular reader',
'subscriber': '\n\n📧 Subscriber'
};
summary += visitorLabels[visitor] || '';
}
return summary;
},
customStyles: () => {
const helpful = quickSection.thumbRating('helpfulness')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (helpful === 'up') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
}
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const helpful = quickSection.thumbRating('helpfulness')?.value();
if (helpful === 'up') return 'Send Feedback';
if (helpful === 'down') return 'Help Us Improve';
return 'Submit';
},
isVisible: () => quickSection.thumbRating('helpfulness')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thanks for Your Feedback!',
message: 'Your input helps us create better content. Check back soon for more articles tailored to your interests.'
});
}