export function featureDiscoveryForm(form: FormTs) {
// Feature Discovery Survey
// Demonstrates: MatrixQuestion (awareness), Pages, StarRating, RatingScale, Dropdown, CheckboxList, dynamic content
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Feature Discovery Survey',
computedValue: () => 'Help us understand which features you know about and use. This takes about 3 minutes.',
customStyles: {
backgroundColor: '#0ea5e9',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('surveyPages', {
heightMode: 'tallest-page'
});
// ============================================
// PAGE 1: User Context
// ============================================
const page1 = pages.addPage('context');
const contextSection = page1.addSubform('contextSection', {
title: 'About Your Usage'
});
contextSection.addRow(row => {
row.addDropdown('userType', {
label: 'How would you describe yourself?',
options: [
{ id: 'new', name: 'New user (less than 1 month)' },
{ id: 'regular', name: 'Regular user (1-6 months)' },
{ id: 'experienced', name: 'Experienced user (6+ months)' },
{ id: 'power', name: 'Power user (daily, advanced features)' },
{ id: 'admin', name: 'Team admin or manager' }
],
placeholder: 'Select your user type',
isRequired: true
}, '1fr');
row.addDropdown('usageFrequency', {
label: 'How often do you use our product?',
options: [
{ id: 'daily', name: 'Daily' },
{ id: 'weekly', name: 'Several times a week' },
{ id: 'biweekly', name: 'Once or twice a week' },
{ id: 'monthly', name: 'A few times a month' },
{ id: 'rarely', name: 'Rarely' }
],
placeholder: 'Select frequency',
isRequired: true
}, '1fr');
});
contextSection.addRow(row => {
row.addEmojiRating('overallSatisfaction', {
label: 'Overall, how satisfied are you with finding and using features?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center'
});
});
// ============================================
// PAGE 2: Feature Awareness Matrix
// ============================================
const page2 = pages.addPage('awareness');
const awarenessSection = page2.addSubform('awarenessSection', {
title: 'Feature Awareness'
});
awarenessSection.addRow(row => {
row.addTextPanel('awarenessInstructions', {
computedValue: () => 'For each feature below, tell us if you know about it and whether you use it:',
customStyles: {
fontStyle: 'italic',
color: '#64748b',
marginBottom: '12px'
}
});
});
awarenessSection.addRow(row => {
row.addMatrixQuestion('featureAwareness', {
label: 'Feature Awareness & Usage',
rows: [
{ id: 'dashboard', label: 'Dashboard & Analytics', description: 'View your key metrics' },
{ id: 'reports', label: 'Custom Reports', description: 'Create and export reports' },
{ id: 'automation', label: 'Automation Rules', description: 'Set up automatic workflows' },
{ id: 'integrations', label: 'Third-party Integrations', description: 'Connect other tools' },
{ id: 'collaboration', label: 'Team Collaboration', description: 'Share and work together' },
{ id: 'templates', label: 'Templates Library', description: 'Pre-built starting points' },
{ id: 'api', label: 'API Access', description: 'Build custom integrations' }
],
columns: [
{ id: 'unknown', label: "Don't know it" },
{ id: 'know-unused', label: 'Know but not used' },
{ id: 'tried', label: 'Tried once/twice' },
{ id: 'regular', label: 'Use regularly' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// PAGE 3: Feature Value Assessment
// ============================================
const page3 = pages.addPage('value');
const valueSection = page3.addSubform('valueSection', {
title: 'Feature Value'
});
valueSection.addRow(row => {
row.addRatingScale('dashboardValue', {
label: 'How valuable is Dashboard & Analytics to your work?',
preset: 'likert-5',
lowLabel: 'Not valuable',
highLabel: 'Extremely valuable',
alignment: 'center',
isVisible: () => {
const awareness = awarenessSection.matrixQuestion('featureAwareness')?.getRowValue('dashboard');
return awareness !== 'unknown' && awareness !== undefined;
}
});
});
valueSection.addRow(row => {
row.addRatingScale('reportsValue', {
label: 'How valuable is Custom Reports to your work?',
preset: 'likert-5',
lowLabel: 'Not valuable',
highLabel: 'Extremely valuable',
alignment: 'center',
isVisible: () => {
const awareness = awarenessSection.matrixQuestion('featureAwareness')?.getRowValue('reports');
return awareness !== 'unknown' && awareness !== undefined;
}
});
});
valueSection.addRow(row => {
row.addRatingScale('automationValue', {
label: 'How valuable is Automation Rules to your work?',
preset: 'likert-5',
lowLabel: 'Not valuable',
highLabel: 'Extremely valuable',
alignment: 'center',
isVisible: () => {
const awareness = awarenessSection.matrixQuestion('featureAwareness')?.getRowValue('automation');
return awareness !== 'unknown' && awareness !== undefined;
}
});
});
valueSection.addSpacer();
valueSection.addRow(row => {
row.addSuggestionChips('mostValuable', {
label: 'Which features bring you the most value? (Select up to 3)',
suggestions: [
{ id: 'dashboard', name: 'Dashboard' },
{ id: 'reports', name: 'Reports' },
{ id: 'automation', name: 'Automation' },
{ id: 'integrations', name: 'Integrations' },
{ id: 'collaboration', name: 'Collaboration' },
{ id: 'templates', name: 'Templates' },
{ id: 'api', name: 'API' }
],
max: 3,
alignment: 'center'
});
});
// ============================================
// PAGE 4: Discovery Channels
// ============================================
const page4 = pages.addPage('discovery');
const discoverySection = page4.addSubform('discoverySection', {
title: 'How You Discover Features'
});
discoverySection.addRow(row => {
row.addCheckboxList('discoveryChannels', {
label: 'How do you typically learn about new features? (Select all that apply)',
options: [
{ id: 'exploring', name: 'Exploring the interface on my own' },
{ id: 'release-notes', name: 'Release notes and changelogs' },
{ id: 'email', name: 'Email announcements' },
{ id: 'in-app', name: 'In-app notifications and tooltips' },
{ id: 'help-docs', name: 'Help documentation' },
{ id: 'videos', name: 'Tutorial videos' },
{ id: 'colleagues', name: 'Colleagues or team members' },
{ id: 'support', name: 'Customer support' },
{ id: 'social', name: 'Social media or community' }
],
orientation: 'vertical'
});
});
discoverySection.addSpacer();
discoverySection.addRow(row => {
row.addRatingScale('easeOfDiscovery', {
label: 'How easy is it to find and learn about new features?',
preset: 'ces',
lowLabel: 'Very difficult',
highLabel: 'Very easy',
alignment: 'center'
});
});
discoverySection.addRow(row => {
row.addStarRating('onboardingRating', {
label: 'How would you rate the feature onboarding experience?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// PAGE 5: Improvements & Missing Features
// ============================================
const page5 = pages.addPage('improvements');
const improvementsSection = page5.addSubform('improvementsSection', {
title: 'Improvements & Suggestions'
});
improvementsSection.addRow(row => {
row.addCheckboxList('discoveryImprovements', {
label: 'What would help you discover and use more features?',
options: [
{ id: 'guided-tours', name: 'Interactive guided tours' },
{ id: 'video-tutorials', name: 'Short video tutorials' },
{ id: 'better-search', name: 'Better in-app search' },
{ id: 'contextual-tips', name: 'Contextual tips while working' },
{ id: 'feature-spotlight', name: 'Weekly feature spotlight emails' },
{ id: 'use-cases', name: 'Real-world use case examples' },
{ id: 'community', name: 'User community or forum' },
{ id: 'live-training', name: 'Live training sessions' }
],
orientation: 'vertical'
});
});
improvementsSection.addSpacer();
improvementsSection.addRow(row => {
row.addTextarea('missingFeatures', {
label: 'Are there any features you expected to find but couldn\'t?',
placeholder: 'Describe features you looked for but didn\'t find...',
rows: 3,
autoExpand: true
});
});
improvementsSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: 'Any other suggestions for improving feature discoverability?',
placeholder: 'Share your thoughts...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SUMMARY SECTION (Outside pages)
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Survey Summary',
isVisible: () => {
const satisfaction = contextSection.emojiRating('overallSatisfaction')?.value();
return satisfaction !== null && satisfaction !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const userType = contextSection.dropdown('userType')?.value();
const frequency = contextSection.dropdown('usageFrequency')?.value();
const satisfaction = contextSection.emojiRating('overallSatisfaction')?.value();
const discovery = discoverySection.ratingScale('easeOfDiscovery')?.value();
const onboarding = discoverySection.starRating('onboardingRating')?.value();
const mostValuable = valueSection.suggestionChips('mostValuable')?.value() || [];
const channels = discoverySection.checkboxList('discoveryChannels')?.value() || [];
const userTypeLabels: Record<string, string> = {
'new': 'New User',
'regular': 'Regular User',
'experienced': 'Experienced User',
'power': 'Power User',
'admin': 'Admin'
};
const satisfactionLabels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
let summary = `🔍 Feature Discovery Insights\n`;
summary += `${'═'.repeat(30)}\n\n`;
if (userType) summary += `👤 User Type: ${userTypeLabels[userType] || userType}\n`;
if (satisfaction) summary += `😊 Satisfaction: ${satisfactionLabels[satisfaction] || satisfaction}\n`;
if (discovery) summary += `🎯 Discovery Ease: ${discovery}/7\n`;
if (onboarding) summary += `⭐ Onboarding: ${onboarding}/5 stars\n`;
if (mostValuable.length > 0) summary += `\n💎 Most Valuable: ${mostValuable.join(', ')}\n`;
if (channels.length > 0) summary += `📢 Discovery Channels: ${channels.length} selected\n`;
return summary;
},
customStyles: {
padding: '16px',
borderRadius: '8px',
backgroundColor: '#f0f9ff',
borderLeft: '4px solid #0ea5e9',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Survey'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You!',
message: 'Your feedback helps us make features easier to discover and use. We review all responses to improve the product experience.'
});
}