export function marketingToolStackQuiz(form: FormTs) {
form.setTitle(() => '🛠️ Which Marketing Tool Stack Do You Need?');
// ============ RECOMMENDATION STATE ============
const needs = form.state<Record<string, number>>({
emailMarketing: 0,
socialMedia: 0,
analytics: 0,
seo: 0,
automation: 0,
crm: 0,
contentCreation: 0,
advertising: 0
});
const updateNeed = (category: string, points: number) => {
needs.update(current => ({
...current,
[category]: (current[category] || 0) + points
}));
};
const budgetLevel = form.state<'starter' | 'growth' | 'enterprise'>('growth');
const getTopNeeds = (): string[] => {
const n = needs();
const sorted = Object.entries(n)
.filter(([_, score]) => score > 0)
.sort((a, b) => b[1] - a[1])
.slice(0, 4)
.map(([key]) => key);
return sorted;
};
const getCategoryLabel = (category: string) => {
const labels: Record<string, string> = {
emailMarketing: '📧 Email Marketing',
socialMedia: '📱 Social Media',
analytics: '📊 Analytics',
seo: '🔍 SEO',
automation: '🤖 Marketing Automation',
crm: '🤝 CRM',
contentCreation: '✏️ Content Creation',
advertising: '📢 Paid Advertising'
};
return labels[category] || category;
};
const getToolRecommendations = (category: string, budget: string): string[] => {
const tools: Record<string, Record<string, string[]>> = {
emailMarketing: {
starter: ['Mailchimp Free', 'Sender', 'MailerLite'],
growth: ['ConvertKit', 'ActiveCampaign', 'Klaviyo'],
enterprise: ['HubSpot', 'Marketo', 'Salesforce Marketing Cloud']
},
socialMedia: {
starter: ['Buffer Free', 'Later Free', 'Canva'],
growth: ['Hootsuite', 'Sprout Social', 'Buffer Pro'],
enterprise: ['Sprinklr', 'Khoros', 'Brandwatch']
},
analytics: {
starter: ['Google Analytics', 'Hotjar Free', 'Microsoft Clarity'],
growth: ['Mixpanel', 'Amplitude', 'Heap'],
enterprise: ['Adobe Analytics', 'Tableau', 'Looker']
},
seo: {
starter: ['Ubersuggest', 'Google Search Console', 'Yoast'],
growth: ['Ahrefs', 'SEMrush', 'Moz Pro'],
enterprise: ['Conductor', 'BrightEdge', 'seoClarity']
},
automation: {
starter: ['Zapier Free', 'Make', 'IFTTT'],
growth: ['ActiveCampaign', 'Drip', 'Customer.io'],
enterprise: ['HubSpot', 'Marketo', 'Pardot']
},
crm: {
starter: ['HubSpot CRM Free', 'Zoho CRM', 'Freshsales'],
growth: ['Pipedrive', 'Salesforce Essentials', 'HubSpot Sales'],
enterprise: ['Salesforce', 'Microsoft Dynamics', 'Oracle CX']
},
contentCreation: {
starter: ['Canva Free', 'Lumen5', 'Grammarly'],
growth: ['Canva Pro', 'Adobe Express', 'Jasper AI'],
enterprise: ['Adobe Creative Cloud', 'Bynder', 'Contentful']
},
advertising: {
starter: ['Google Ads', 'Meta Ads Manager', 'LinkedIn Ads'],
growth: ['AdEspresso', 'Optmyzr', 'WordStream'],
enterprise: ['Google Marketing Platform', 'The Trade Desk', 'MediaMath']
}
};
return tools[category]?.[budget] || [];
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => '🛠️ Your Personalized Marketing Stack',
message: () => {
const topNeeds = getTopNeeds();
const budget = budgetLevel();
return `Based on your goals and ${budget} budget, we've identified ${topNeeds.length} key tool categories for your marketing stack. Download your detailed report with specific tool recommendations and implementation tips.`;
}
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', {
heightMode: 'current-page'
});
// ============ PAGE 1: Business Context ============
const page1 = pages.addPage('business-context', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 6: Your Business',
computedValue: () => 'Tell us about your marketing needs',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addDropdown('businessType', {
label: 'Business Type',
isRequired: true,
options: [
{ id: 'b2b', name: '🏢 B2B (Business to Business)' },
{ id: 'b2c', name: '🛒 B2C (Business to Consumer)' },
{ id: 'd2c', name: '📦 D2C (Direct to Consumer)' },
{ id: 'saas', name: '💻 SaaS' },
{ id: 'agency', name: '🎨 Agency/Services' },
{ id: 'ecommerce', name: '🛍️ E-commerce' }
],
placeholder: 'Select type',
onValueChange: (val) => {
if (val === 'b2b' || val === 'saas') {
updateNeed('crm', 2);
updateNeed('emailMarketing', 1);
updateNeed('automation', 2);
}
if (val === 'b2c' || val === 'd2c' || val === 'ecommerce') {
updateNeed('socialMedia', 2);
updateNeed('advertising', 2);
updateNeed('emailMarketing', 2);
}
if (val === 'agency') {
updateNeed('contentCreation', 2);
updateNeed('socialMedia', 2);
}
}
}, '1fr');
row.addDropdown('teamSize', {
label: 'Marketing Team Size',
isRequired: true,
options: [
{ id: 'solo', name: '👤 Just me' },
{ id: 'small', name: '👥 2-5 people' },
{ id: 'medium', name: '🏢 6-20 people' },
{ id: 'large', name: '🏛️ 20+ people' }
],
placeholder: 'Select size'
}, '1fr');
});
page1.addRow(row => {
row.addRadioButton('budget', {
label: 'What\'s your monthly marketing tools budget?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'starter', name: '💰 Starter: $0-$200/month (free & affordable tools)' },
{ id: 'growth', name: '💎 Growth: $200-$1,000/month (professional tools)' },
{ id: 'enterprise', name: '🏆 Enterprise: $1,000+/month (advanced platforms)' }
],
onValueChange: (val) => {
if (val === 'starter') budgetLevel.set('starter');
else if (val === 'growth') budgetLevel.set('growth');
else if (val === 'enterprise') budgetLevel.set('enterprise');
}
});
});
// ============ PAGE 2: Marketing Goals ============
const page2 = pages.addPage('marketing-goals', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 6: Marketing Goals',
computedValue: () => 'What are your primary marketing objectives?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addSuggestionChips('primaryGoals', {
label: 'Select your top 3 marketing goals',
isRequired: true,
suggestions: [
{ id: 'lead-gen', name: '🎯 Lead Generation' },
{ id: 'brand', name: '📢 Brand Awareness' },
{ id: 'sales', name: '💰 Drive Sales' },
{ id: 'retention', name: '🔄 Customer Retention' },
{ id: 'traffic', name: '📈 Website Traffic' },
{ id: 'engagement', name: '💬 Social Engagement' }
],
min: 1,
max: 3,
onValueChange: (val) => {
if (!val) return;
if (val.includes('lead-gen')) { updateNeed('crm', 2); updateNeed('automation', 2); }
if (val.includes('brand')) { updateNeed('socialMedia', 2); updateNeed('contentCreation', 2); }
if (val.includes('sales')) { updateNeed('advertising', 2); updateNeed('emailMarketing', 2); }
if (val.includes('retention')) { updateNeed('emailMarketing', 2); updateNeed('automation', 2); }
if (val.includes('traffic')) { updateNeed('seo', 2); updateNeed('advertising', 1); }
if (val.includes('engagement')) { updateNeed('socialMedia', 2); updateNeed('contentCreation', 1); }
}
});
});
page2.addRow(row => {
row.addRadioButton('contentVolume', {
label: 'How much content do you produce?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'high', name: '📝 High volume (daily posts, multiple formats)' },
{ id: 'medium', name: '📋 Medium (weekly content, few formats)' },
{ id: 'low', name: '📄 Low (occasional content)' },
{ id: 'starting', name: '🌱 Just starting content marketing' }
],
onValueChange: (val) => {
if (val === 'high') { updateNeed('contentCreation', 3); updateNeed('socialMedia', 2); }
if (val === 'medium') { updateNeed('contentCreation', 2); }
if (val === 'starting') { updateNeed('contentCreation', 1); }
}
});
});
// ============ PAGE 3: Current Challenges ============
const page3 = pages.addPage('challenges', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 6: Your Challenges',
computedValue: () => 'What marketing challenges do you face?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addSuggestionChips('challenges', {
label: 'Select your biggest challenges',
isRequired: true,
suggestions: [
{ id: 'tracking', name: '📊 Tracking ROI' },
{ id: 'time', name: '⏰ Not Enough Time' },
{ id: 'leads', name: '🎯 Not Enough Leads' },
{ id: 'conversion', name: '💰 Low Conversion' },
{ id: 'content', name: '✏️ Content Creation' },
{ id: 'reach', name: '📢 Limited Reach' },
{ id: 'data', name: '🔢 Data Silos' },
{ id: 'personalization', name: '🎨 Personalization' }
],
min: 1,
max: 4,
onValueChange: (val) => {
if (!val) return;
if (val.includes('tracking')) updateNeed('analytics', 3);
if (val.includes('time')) updateNeed('automation', 3);
if (val.includes('leads')) { updateNeed('advertising', 2); updateNeed('seo', 2); }
if (val.includes('conversion')) { updateNeed('analytics', 2); updateNeed('automation', 2); }
if (val.includes('content')) updateNeed('contentCreation', 3);
if (val.includes('reach')) { updateNeed('socialMedia', 2); updateNeed('advertising', 2); }
if (val.includes('data')) { updateNeed('crm', 2); updateNeed('analytics', 2); }
if (val.includes('personalization')) { updateNeed('automation', 2); updateNeed('emailMarketing', 2); }
}
});
});
// ============ PAGE 4: Channels ============
const page4 = pages.addPage('channels', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 6: Marketing Channels',
computedValue: () => 'Which channels are important to you?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addMatrixQuestion('channelImportance', {
label: 'Rate the importance of each channel:',
isRequired: true,
rows: [
{ id: 'email', label: 'Email Marketing' },
{ id: 'social', label: 'Social Media' },
{ id: 'search', label: 'SEO/Organic Search' },
{ id: 'paid', label: 'Paid Advertising' },
{ id: 'content', label: 'Content/Blog' }
],
columns: [
{ id: 'not', label: 'Not Using' },
{ id: 'low', label: 'Low' },
{ id: 'medium', label: 'Medium' },
{ id: 'high', label: 'High' }
],
selectionMode: 'single',
striped: true,
fullWidth: true,
onValueChange: (val) => {
if (!val) return;
const points: Record<string, number> = { not: 0, low: 1, medium: 2, high: 3 };
if (val['email']) updateNeed('emailMarketing', points[val['email'] as string] || 0);
if (val['social']) updateNeed('socialMedia', points[val['social'] as string] || 0);
if (val['search']) updateNeed('seo', points[val['search'] as string] || 0);
if (val['paid']) updateNeed('advertising', points[val['paid'] as string] || 0);
if (val['content']) updateNeed('contentCreation', points[val['content'] as string] || 0);
}
});
});
// ============ PAGE 5: Results ============
const page5 = pages.addPage('results', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 6: Your Recommended Stack',
computedValue: () => 'Here\'s your personalized marketing tool stack',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextPanel('stackTitle', {
label: '🛠️ Your Marketing Tool Stack',
computedValue: () => `Optimized for ${budgetLevel()} budget`,
customStyles: {
fontSize: '1.2rem',
fontWeight: '700',
textAlign: 'center',
color: '#1e40af'
}
});
});
// Dynamic tool recommendations
page5.addRow(row => {
row.addTextPanel('recommendation1', {
computedValue: () => {
const top = getTopNeeds();
if (top.length > 0) {
const cat = top[0];
const tools = getToolRecommendations(cat, budgetLevel());
return `${getCategoryLabel(cat)}\n${tools.join(', ')}`;
}
return '';
},
customStyles: {
fontSize: '0.95rem',
padding: '12px',
background: '#dbeafe',
borderRadius: '8px',
whiteSpace: 'pre-line'
}
});
});
page5.addRow(row => {
row.addTextPanel('recommendation2', {
computedValue: () => {
const top = getTopNeeds();
if (top.length > 1) {
const cat = top[1];
const tools = getToolRecommendations(cat, budgetLevel());
return `${getCategoryLabel(cat)}\n${tools.join(', ')}`;
}
return '';
},
isVisible: () => getTopNeeds().length > 1,
customStyles: {
fontSize: '0.95rem',
padding: '12px',
background: '#d1fae5',
borderRadius: '8px',
whiteSpace: 'pre-line'
}
});
});
page5.addRow(row => {
row.addTextPanel('recommendation3', {
computedValue: () => {
const top = getTopNeeds();
if (top.length > 2) {
const cat = top[2];
const tools = getToolRecommendations(cat, budgetLevel());
return `${getCategoryLabel(cat)}\n${tools.join(', ')}`;
}
return '';
},
isVisible: () => getTopNeeds().length > 2,
customStyles: {
fontSize: '0.95rem',
padding: '12px',
background: '#fef3c7',
borderRadius: '8px',
whiteSpace: 'pre-line'
}
});
});
page5.addRow(row => {
row.addTextPanel('recommendation4', {
computedValue: () => {
const top = getTopNeeds();
if (top.length > 3) {
const cat = top[3];
const tools = getToolRecommendations(cat, budgetLevel());
return `${getCategoryLabel(cat)}\n${tools.join(', ')}`;
}
return '';
},
isVisible: () => getTopNeeds().length > 3,
customStyles: {
fontSize: '0.95rem',
padding: '12px',
background: '#fce7f3',
borderRadius: '8px',
whiteSpace: 'pre-line'
}
});
});
// ============ PAGE 6: Lead Capture ============
const page6 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page6.addRow(row => {
row.addTextPanel('header6', {
label: 'Step 6 of 6: Get Your Complete Guide',
computedValue: () => 'Enter your details to receive your full tool stack guide',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page6.addSpacer({ height: '24px' });
page6.addRow(row => {
row.addTextbox('name', {
label: 'Your Name',
isRequired: true,
placeholder: 'Marketing Pro'
}, '1fr');
row.addEmail('email', {
label: 'Work Email',
isRequired: true,
placeholder: 'marketer@company.com'
}, '1fr');
});
page6.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'guide', name: '📄 Send me the complete tool stack guide', isRequired: true },
{ id: 'deals', name: '💰 Send me exclusive tool discounts' },
{ id: 'tips', name: '💡 Send me martech tips & updates' }
],
defaultValue: ['guide'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('tool-stack-guide', pdf => {
pdf.configure({
filename: 'marketing-tool-stack-guide.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Tool Stack Guide',
header: {
title: 'Your Marketing Tool Stack Guide',
subtitle: `${budgetLevel().charAt(0).toUpperCase() + budgetLevel().slice(1)} Budget`
},
footer: {
text: 'Generated by FormTs Marketing Stack Quiz',
showPageNumbers: true
}
});
pdf.addSection('Recommended Categories', section => {
const top = getTopNeeds();
for (const cat of top) {
section.addText(`${getCategoryLabel(cat)}`);
}
});
pdf.addSection('Tool Recommendations', section => {
const top = getTopNeeds();
const budget = budgetLevel();
for (const cat of top) {
const tools = getToolRecommendations(cat, budget);
section.addText(`${getCategoryLabel(cat)}:`);
for (const tool of tools) {
section.addText(` • ${tool}`);
}
section.addSpacer(5);
}
});
pdf.addPageBreak();
pdf.addSection('Implementation Roadmap', section => {
section.addText('Month 1: Core Foundation');
section.addText('• Set up analytics and tracking first');
section.addText('• Implement CRM if B2B/lead-gen focused');
section.addSpacer(5);
section.addText('Month 2: Channel Tools');
section.addText('• Add email marketing platform');
section.addText('• Set up social media management');
section.addSpacer(5);
section.addText('Month 3: Optimization');
section.addText('• Add automation workflows');
section.addText('• Integrate tools for unified data');
});
pdf.addSection('Integration Tips', section => {
section.addText('• Use Zapier or Make to connect tools');
section.addText('• Ensure UTM tracking across all channels');
section.addText('• Set up unified dashboards in analytics');
section.addText('• Document your tech stack and processes');
});
});
// ============ SUBMIT BUTTON ============
form.configureSubmitButton({
label: () => `🛠️ Get My Complete Tool Stack Guide`
});
form.configureSubmitBehavior({
sendToServer: true
});
}