export function ecommerceConversionAuditQuiz(form: FormTs) {
form.setTitle(() => '🛒 Is Your E-commerce Store Optimized?');
// ============ SCORING SYSTEM ============
const scores = form.state<Record<string, number>>({});
const updateScore = (category: string, points: number) => {
scores.update(current => ({ ...current, [category]: points }));
};
const getTotalScore = () => {
const s = scores();
return Object.values(s).reduce((sum, val) => sum + (val || 0), 0);
};
const getMaxScore = () => 100;
const getScorePercentage = () => Math.round((getTotalScore() / getMaxScore()) * 100);
const getOptimizationLevel = (): 'critical' | 'needs-work' | 'good' | 'optimized' | 'excellent' => {
const pct = getScorePercentage();
if (pct >= 90) return 'excellent';
if (pct >= 75) return 'optimized';
if (pct >= 55) return 'good';
if (pct >= 35) return 'needs-work';
return 'critical';
};
const getOptimizationLabel = () => {
const level = getOptimizationLevel();
const labels = {
critical: '🚨 Critical Issues Found',
'needs-work': '⚠️ Needs Significant Work',
good: '📈 Good Foundation',
optimized: '✅ Well Optimized',
excellent: '🏆 Conversion Champion'
};
return labels[level];
};
const getOptimizationColor = () => {
const level = getOptimizationLevel();
const colors = {
critical: '#dc2626',
'needs-work': '#ea580c',
good: '#ca8a04',
optimized: '#16a34a',
excellent: '#7c3aed'
};
return colors[level];
};
// Estimated conversion rate improvement
const getEstimatedImprovement = () => {
const pct = getScorePercentage();
if (pct < 40) return '50-100%';
if (pct < 60) return '30-50%';
if (pct < 75) return '15-30%';
if (pct < 90) return '5-15%';
return '0-5%';
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => `${getOptimizationLabel()}`,
message: () => {
const pct = getScorePercentage();
const improvement = getEstimatedImprovement();
return `Your store optimization score is ${pct}%. Based on industry benchmarks, implementing the recommendations in your report could improve your conversion rate by ${improvement}. Download your detailed audit report for specific action items.`;
}
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', {
heightMode: 'current-page'
});
// ============ PAGE 1: Store Basics ============
const page1 = pages.addPage('store-basics', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 7: Store Basics',
computedValue: () => 'Tell us about your e-commerce store',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addDropdown('platform', {
label: 'What platform powers your store?',
isRequired: true,
options: [
{ id: 'shopify', name: '🛍️ Shopify' },
{ id: 'woocommerce', name: '🔌 WooCommerce' },
{ id: 'magento', name: '🧱 Magento/Adobe Commerce' },
{ id: 'bigcommerce', name: '📦 BigCommerce' },
{ id: 'custom', name: '⚙️ Custom Built' },
{ id: 'other', name: '📋 Other' }
],
placeholder: 'Select platform'
}, '1fr');
row.addDropdown('monthlyRevenue', {
label: 'Monthly Revenue Range',
isRequired: true,
options: [
{ id: 'under-10k', name: '💰 Under $10,000' },
{ id: '10k-50k', name: '💰 $10,000 - $50,000' },
{ id: '50k-100k', name: '💰 $50,000 - $100,000' },
{ id: '100k-500k', name: '💎 $100,000 - $500,000' },
{ id: '500k-plus', name: '💎 $500,000+' }
],
placeholder: 'Select range'
}, '1fr');
});
page1.addRow(row => {
row.addSlider('currentConversion', {
label: 'What is your current conversion rate?',
tooltip: 'Industry average is 2-3%. Top performers reach 5%+',
isRequired: true,
min: 0,
max: 10,
step: 0.1,
unit: '%',
defaultValue: 2
});
});
// ============ PAGE 2: User Experience ============
const page2 = pages.addPage('user-experience', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 7: User Experience',
computedValue: () => 'How smooth is the shopping experience?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addMatrixQuestion('uxElements', {
label: 'Rate the implementation of these UX elements:',
isRequired: true,
rows: [
{ id: 'mobile', label: 'Mobile Responsiveness', description: 'Works great on phones' },
{ id: 'speed', label: 'Page Load Speed', description: 'Under 3 seconds' },
{ id: 'navigation', label: 'Site Navigation', description: 'Easy to find products' },
{ id: 'search', label: 'Search Functionality', description: 'Smart product search' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'basic', label: 'Basic' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
selectionMode: 'single',
striped: true,
fullWidth: true,
onValueChange: (val) => {
if (!val) return;
const pointsMap: Record<string, number> = { poor: 0, basic: 1, good: 2, excellent: 3 };
let total = 0;
for (const col of Object.values(val)) {
total += pointsMap[col as string] || 0;
}
updateScore('ux', Math.min(total, 12));
}
});
});
page2.addRow(row => {
row.addRadioButton('loadTime', {
label: 'What is your average page load time?',
tooltip: 'Test at Google PageSpeed Insights',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'fast', name: '⚡ Under 2 seconds' },
{ id: 'good', name: '✅ 2-3 seconds' },
{ id: 'slow', name: '⚠️ 3-5 seconds' },
{ id: 'very-slow', name: '🐢 Over 5 seconds' },
{ id: 'unknown', name: '❓ Not sure' }
],
onValueChange: (val) => {
const points = { fast: 8, good: 6, slow: 3, 'very-slow': 0, unknown: 2 };
updateScore('loadTime', points[val as keyof typeof points] || 0);
}
});
});
// ============ PAGE 3: Product Pages ============
const page3 = pages.addPage('product-pages', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 7: Product Pages',
computedValue: () => 'How compelling are your product listings?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addSuggestionChips('productElements', {
label: 'Which elements do your product pages include?',
isRequired: true,
suggestions: [
{ id: 'highres-images', name: '📸 High-res Images' },
{ id: 'zoom', name: '🔍 Image Zoom' },
{ id: 'video', name: '🎬 Product Video' },
{ id: '360', name: '🔄 360° View' },
{ id: 'reviews', name: '⭐ Customer Reviews' },
{ id: 'qa', name: '❓ Q&A Section' },
{ id: 'related', name: '🔗 Related Products' },
{ id: 'urgency', name: '⏰ Urgency Elements' }
],
min: 1,
onValueChange: (val) => {
const points = val ? Math.min(val.length * 2, 12) : 0;
updateScore('productElements', points);
}
});
});
page3.addRow(row => {
row.addRadioButton('productDescriptions', {
label: 'How would you rate your product descriptions?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'optimized', name: '📝 Unique, benefit-focused, SEO-optimized' },
{ id: 'good', name: '✅ Well-written with key features' },
{ id: 'basic', name: '📋 Basic manufacturer descriptions' },
{ id: 'minimal', name: '❌ Minimal or no descriptions' }
],
onValueChange: (val) => {
const points = { optimized: 8, good: 5, basic: 2, minimal: 0 };
updateScore('descriptions', points[val as keyof typeof points] || 0);
}
});
});
// ============ PAGE 4: Checkout Process ============
const page4 = pages.addPage('checkout', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 7: Checkout Process',
computedValue: () => 'Checkout friction is the #1 conversion killer',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRadioButton('guestCheckout', {
label: 'Do you offer guest checkout?',
tooltip: 'Forcing account creation can reduce conversions by 35%',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'yes', name: '✅ Yes, prominently offered' },
{ id: 'hidden', name: '🔍 Yes, but hard to find' },
{ id: 'no', name: '❌ No, account required' }
],
onValueChange: (val) => {
const points = { yes: 8, hidden: 4, no: 0 };
updateScore('guestCheckout', points[val as keyof typeof points] || 0);
}
});
});
page4.addRow(row => {
row.addSlider('checkoutSteps', {
label: 'How many steps in your checkout process?',
tooltip: 'Best practice is 1-3 steps',
isRequired: true,
min: 1,
max: 7,
step: 1,
unit: 'steps',
defaultValue: 3,
onValueChange: (val) => {
if (val == null) return;
const points = val <= 2 ? 8 : val <= 3 ? 6 : val <= 4 ? 4 : val <= 5 ? 2 : 0;
updateScore('checkoutSteps', points);
}
});
});
page4.addRow(row => {
row.addSuggestionChips('paymentOptions', {
label: 'Which payment methods do you accept?',
isRequired: true,
suggestions: [
{ id: 'credit', name: '💳 Credit Cards' },
{ id: 'paypal', name: '🅿️ PayPal' },
{ id: 'apple-pay', name: '🍎 Apple Pay' },
{ id: 'google-pay', name: '📱 Google Pay' },
{ id: 'shop-pay', name: '🛍️ Shop Pay' },
{ id: 'klarna', name: '💜 Klarna/Afterpay' },
{ id: 'crypto', name: '₿ Crypto' }
],
min: 1,
onValueChange: (val) => {
const points = val ? Math.min(val.length * 2, 8) : 0;
updateScore('payments', points);
}
});
});
// ============ PAGE 5: Trust & Social Proof ============
const page5 = pages.addPage('trust', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 7: Trust & Social Proof',
computedValue: () => 'Building trust is essential for conversion',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addSuggestionChips('trustElements', {
label: 'Which trust elements does your store display?',
isRequired: true,
suggestions: [
{ id: 'ssl', name: '🔒 SSL Certificate' },
{ id: 'badges', name: '🛡️ Trust Badges' },
{ id: 'reviews', name: '⭐ Reviews/Ratings' },
{ id: 'testimonials', name: '💬 Testimonials' },
{ id: 'guarantee', name: '✅ Money-back Guarantee' },
{ id: 'secure-payment', name: '💳 Secure Payment Icons' },
{ id: 'social-proof', name: '👥 Social Proof Popups' }
],
min: 1,
onValueChange: (val) => {
const points = val ? Math.min(val.length * 2, 10) : 0;
updateScore('trustElements', points);
}
});
});
page5.addRow(row => {
row.addRadioButton('returnPolicy', {
label: 'How would you describe your return policy?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'generous', name: '🎁 Generous (30+ days, free returns)' },
{ id: 'standard', name: '📋 Standard (14-30 days)' },
{ id: 'restrictive', name: '⚠️ Restrictive (under 14 days)' },
{ id: 'none', name: '❌ No returns / not clear' }
],
onValueChange: (val) => {
const points = { generous: 8, standard: 5, restrictive: 2, none: 0 };
updateScore('returnPolicy', points[val as keyof typeof points] || 0);
}
});
});
page5.addRow(row => {
row.addRadioButton('customerSupport', {
label: 'What customer support options do you offer?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'omnichannel', name: '🌟 Live chat + phone + email + FAQ' },
{ id: 'good', name: '💬 Live chat + email' },
{ id: 'basic', name: '📧 Email only' },
{ id: 'minimal', name: '📋 Contact form / FAQ only' }
],
onValueChange: (val) => {
const points = { omnichannel: 8, good: 6, basic: 3, minimal: 1 };
updateScore('support', points[val as keyof typeof points] || 0);
}
});
});
// ============ PAGE 6: Results ============
const page6 = pages.addPage('results', { mobileBreakpoint: 500 });
page6.addRow(row => {
row.addTextPanel('header6', {
label: 'Step 6 of 7: Your Audit Results',
computedValue: () => 'Your e-commerce conversion audit results',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page6.addSpacer({ height: '24px' });
page6.addRow(row => {
row.addTextPanel('finalScoreLabel', {
label: '🛒 E-commerce Conversion Audit Results',
computedValue: () => '',
customStyles: {
fontSize: '1.2rem',
fontWeight: '700',
textAlign: 'center'
}
});
});
page6.addRow(row => {
row.addTextPanel('finalOptimizationLevel', {
computedValue: () => getOptimizationLabel(),
customStyles: () => ({
fontSize: '1.5rem',
fontWeight: '800',
textAlign: 'center',
color: getOptimizationColor(),
padding: '15px',
background: '#f9fafb',
borderRadius: '12px',
border: `3px solid ${getOptimizationColor()}`
})
});
});
page6.addRow(row => {
row.addTextPanel('scoreBreakdown', {
computedValue: () => {
const total = getTotalScore();
const pct = getScorePercentage();
return `Optimization Score: ${total}/${getMaxScore()} (${pct}%)`;
},
customStyles: {
fontSize: '1.1rem',
fontWeight: '600',
textAlign: 'center',
color: '#374151',
marginTop: '10px'
}
});
});
page6.addRow(row => {
row.addTextPanel('improvementPotential', {
computedValue: () => {
const improvement = getEstimatedImprovement();
return `📈 Potential Conversion Rate Improvement: ${improvement}`;
},
customStyles: {
fontSize: '1.1rem',
fontWeight: '600',
textAlign: 'center',
color: '#16a34a',
padding: '12px',
background: '#ecfdf5',
borderRadius: '8px',
marginTop: '10px'
}
});
});
const detailsSection = page6.addSubform('detailsBreakdown', {
title: '📊 Detailed Score Breakdown (click to expand)',
isCollapsible: true,
customStyles: {
marginTop: '1rem',
background: '#f9fafb',
borderRadius: '8px'
}
});
detailsSection.addRow(row => {
row.addTextPanel('uxDetail', {
label: '🖥️ User Experience',
computedValue: () => {
const s = scores();
const score = (s['ux'] || 0) + (s['loadTime'] || 0);
return `${score}/20 points`;
},
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#dbeafe',
borderRadius: '6px'
}
}, '1fr');
row.addTextPanel('productDetail', {
label: '📦 Product Pages',
computedValue: () => {
const s = scores();
const score = (s['productElements'] || 0) + (s['descriptions'] || 0);
return `${score}/20 points`;
},
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#dbeafe',
borderRadius: '6px'
}
}, '1fr');
});
detailsSection.addRow(row => {
row.addTextPanel('checkoutDetail', {
label: '💳 Checkout',
computedValue: () => {
const s = scores();
const score = (s['guestCheckout'] || 0) + (s['checkoutSteps'] || 0) + (s['payments'] || 0);
return `${score}/24 points`;
},
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#dbeafe',
borderRadius: '6px'
}
}, '1fr');
row.addTextPanel('trustDetail', {
label: '🛡️ Trust & Support',
computedValue: () => {
const s = scores();
const score = (s['trustElements'] || 0) + (s['returnPolicy'] || 0) + (s['support'] || 0);
return `${score}/26 points`;
},
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#dbeafe',
borderRadius: '6px'
}
}, '1fr');
});
// ============ PAGE 7: Lead Capture ============
const page7 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page7.addRow(row => {
row.addTextPanel('header7', {
label: 'Step 7 of 7: Get Your Audit Report',
computedValue: () => 'Enter your details to receive your personalized conversion audit',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page7.addSpacer({ height: '24px' });
page7.addRow(row => {
row.addTextbox('name', {
label: 'Your Name',
isRequired: true,
placeholder: 'Alex Johnson'
}, '1fr');
row.addEmail('email', {
label: 'Work Email',
isRequired: true,
placeholder: 'alex@store.com'
}, '1fr');
});
page7.addRow(row => {
row.addTextbox('storeName', {
label: 'Store Name',
placeholder: 'My Awesome Store'
}, '1fr');
row.addTextbox('storeUrl', {
label: 'Store URL',
placeholder: 'https://mystore.com'
}, '1fr');
});
page7.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'report', name: '📄 Send me the detailed PDF audit report', isRequired: true },
{ id: 'tips', name: '💡 Send me weekly e-commerce optimization tips' },
{ id: 'consultation', name: '📞 I\'d like a free CRO consultation' }
],
defaultValue: ['report'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('conversion-audit', pdf => {
pdf.configure({
filename: 'ecommerce-conversion-audit.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Audit Report',
header: {
title: 'E-commerce Conversion Audit Report',
subtitle: 'Personalized Optimization Recommendations'
},
footer: {
text: 'Generated by FormTs E-commerce Audit Tool',
showPageNumbers: true
}
});
pdf.addSection('Executive Summary', section => {
section.addRow(row => {
row.addField('Optimization Level', getOptimizationLabel());
row.addField('Overall Score', `${getScorePercentage()}%`);
});
section.addRow(row => {
row.addField('Potential Improvement', getEstimatedImprovement());
row.addField('Audit Date', new Date().toLocaleDateString());
});
});
pdf.addSection('Category Breakdown', section => {
const s = scores();
section.addTable(
['Category', 'Score', 'Max', 'Priority'],
[
['User Experience', `${(s['ux'] || 0) + (s['loadTime'] || 0)}`, '20', (s['ux'] || 0) < 8 ? '🔴 High' : '🟢 Good'],
['Product Pages', `${(s['productElements'] || 0) + (s['descriptions'] || 0)}`, '20', (s['productElements'] || 0) < 8 ? '🔴 High' : '🟢 Good'],
['Checkout Process', `${(s['guestCheckout'] || 0) + (s['checkoutSteps'] || 0) + (s['payments'] || 0)}`, '24', (s['guestCheckout'] || 0) < 6 ? '🔴 High' : '🟢 Good'],
['Trust & Support', `${(s['trustElements'] || 0) + (s['returnPolicy'] || 0) + (s['support'] || 0)}`, '26', (s['trustElements'] || 0) < 6 ? '🔴 High' : '🟢 Good']
]
);
});
pdf.addPageBreak();
pdf.addSection('Quick Wins (Implement This Week)', section => {
const s = scores();
if ((s['guestCheckout'] || 0) < 8) {
section.addText('✅ Enable prominent guest checkout option');
}
if ((s['loadTime'] || 0) < 6) {
section.addText('✅ Optimize images and enable lazy loading');
}
if ((s['trustElements'] || 0) < 6) {
section.addText('✅ Add trust badges near checkout button');
}
if ((s['productElements'] || 0) < 8) {
section.addText('✅ Add customer reviews to product pages');
}
});
pdf.addSection('Medium-Term Improvements', section => {
section.addText('1. Implement A/B testing on product pages');
section.addText('2. Add abandoned cart email recovery');
section.addText('3. Optimize mobile checkout experience');
section.addText('4. Set up heat mapping to identify friction');
});
});
// ============ SUBMIT BUTTON ============
form.configureSubmitButton({
label: () => `🛒 Get My Audit Report (Score: ${getScorePercentage()}%)`
});
form.configureSubmitBehavior({
sendToServer: true
});
}