export function seasonalCampaignForm(form: FormTs) {
// Seasonal Campaign Feedback - Marketing Effectiveness Measurement
// Demonstrates: RadioButton, CheckboxList, RatingScale, EmojiRating, Slider, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Campaign Feedback Survey',
computedValue: () => 'Help us understand how our seasonal promotion reached you.',
customStyles: {
backgroundColor: '#f59e0b',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Campaign Awareness
// ============================================
const awarenessSection = form.addSubform('awarenessSection', {
title: 'Campaign Awareness'
});
awarenessSection.addRow(row => {
row.addRadioButton('sawCampaign', {
label: 'Did you see or hear about our seasonal promotion?',
options: [
{ id: 'yes-clear', name: 'Yes, I clearly remember it' },
{ id: 'yes-vague', name: 'Yes, but only vaguely' },
{ id: 'not-sure', name: 'I\'m not sure' },
{ id: 'no', name: 'No, I didn\'t see it' }
],
orientation: 'vertical',
isRequired: true
});
});
// ============================================
// SECTION 2: Campaign Channels (If aware)
// ============================================
const channelSection = form.addSubform('channelSection', {
title: 'Where Did You See It?',
isVisible: () => {
const saw = awarenessSection.radioButton('sawCampaign')?.value();
return saw === 'yes-clear' || saw === 'yes-vague';
}
});
channelSection.addRow(row => {
row.addCheckboxList('channels', {
label: 'Where did you see the promotion? (Select all that apply)',
options: [
{ id: 'email', name: 'Email newsletter' },
{ id: 'social-feed', name: 'Social media feed' },
{ id: 'social-ad', name: 'Social media ads' },
{ id: 'website', name: 'Website banners' },
{ id: 'app', name: 'Mobile app notification' },
{ id: 'sms', name: 'SMS/Text message' },
{ id: 'search', name: 'Search engine ads' },
{ id: 'display', name: 'Display ads on other sites' },
{ id: 'tv', name: 'TV commercial' },
{ id: 'radio', name: 'Radio/Podcast' },
{ id: 'print', name: 'Print/Magazine' },
{ id: 'store', name: 'In-store signage' },
{ id: 'friend', name: 'Friend or family' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 3: Message Recall (If aware)
// ============================================
const recallSection = form.addSubform('recallSection', {
title: 'What Do You Remember?',
isVisible: () => {
const saw = awarenessSection.radioButton('sawCampaign')?.value();
return saw === 'yes-clear' || saw === 'yes-vague';
}
});
recallSection.addRow(row => {
row.addCheckboxList('rememberedElements', {
label: 'Which elements of the promotion do you remember? (Select all)',
options: [
{ id: 'discount', name: 'Discount percentage or amount' },
{ id: 'products', name: 'Specific products featured' },
{ id: 'deadline', name: 'Deadline or urgency message' },
{ id: 'free-shipping', name: 'Free shipping offer' },
{ id: 'bundle', name: 'Bundle deals' },
{ id: 'gift', name: 'Gift with purchase' },
{ id: 'code', name: 'Promo code' },
{ id: 'theme', name: 'Seasonal theme or imagery' }
],
orientation: 'vertical'
});
});
recallSection.addSpacer();
recallSection.addRow(row => {
row.addRatingScale('messageClarity', {
label: 'How clear was the promotional message?',
preset: 'likert-5',
lowLabel: 'Very confusing',
highLabel: 'Very clear',
alignment: 'center'
});
});
// ============================================
// SECTION 4: Campaign Reaction (If aware)
// ============================================
const reactionSection = form.addSubform('reactionSection', {
title: 'Your Reaction',
isVisible: () => {
const saw = awarenessSection.radioButton('sawCampaign')?.value();
return saw === 'yes-clear' || saw === 'yes-vague';
}
});
reactionSection.addRow(row => {
row.addEmojiRating('initialReaction', {
label: 'What was your initial reaction to the promotion?',
preset: 'custom',
emojis: [
{ id: 'annoyed', emoji: '😒', label: 'Annoyed' },
{ id: 'uninterested', emoji: '😐', label: 'Uninterested' },
{ id: 'curious', emoji: '🤔', label: 'Curious' },
{ id: 'interested', emoji: '😊', label: 'Interested' },
{ id: 'excited', emoji: '🤩', label: 'Excited' }
],
size: 'lg',
alignment: 'center'
});
});
reactionSection.addRow(row => {
row.addMatrixQuestion('campaignAttributes', {
label: 'How would you rate these aspects of the promotion?',
rows: [
{ id: 'appealing', label: 'Visual appeal' },
{ id: 'relevant', label: 'Relevance to my needs' },
{ id: 'timing', label: 'Timing of the offer' },
{ id: 'value', label: 'Value of the deal' }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 5: Actions Taken
// ============================================
const actionsSection = form.addSubform('actionsSection', {
title: 'What Did You Do?',
isVisible: () => {
const saw = awarenessSection.radioButton('sawCampaign')?.value();
return saw === 'yes-clear' || saw === 'yes-vague';
}
});
actionsSection.addRow(row => {
row.addCheckboxList('actionsTaken', {
label: 'What actions did you take after seeing the promotion?',
options: [
{ id: 'clicked', name: 'Clicked to learn more' },
{ id: 'browsed', name: 'Browsed products on sale' },
{ id: 'cart', name: 'Added items to cart' },
{ id: 'purchased', name: 'Made a purchase' },
{ id: 'saved', name: 'Saved for later' },
{ id: 'shared', name: 'Shared with someone' },
{ id: 'compared', name: 'Compared with competitors' },
{ id: 'nothing', name: 'Didn\'t take any action' }
],
orientation: 'vertical'
});
});
// Conditional: If purchased
actionsSection.addRow(row => {
row.addStarRating('purchaseSatisfaction', {
label: 'How satisfied are you with your purchase?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true,
isVisible: () => {
const actions = actionsSection.checkboxList('actionsTaken')?.value() || [];
return actions.includes('purchased');
}
});
});
// Conditional: If didn't take action
actionsSection.addRow(row => {
row.addCheckboxList('whyNoAction', {
label: 'What stopped you from taking action?',
options: [
{ id: 'no-need', name: 'Didn\'t need anything right now' },
{ id: 'price', name: 'Prices still too high' },
{ id: 'products', name: 'Products weren\'t interesting' },
{ id: 'timing', name: 'Bad timing for me' },
{ id: 'competitor', name: 'Found a better deal elsewhere' },
{ id: 'forgot', name: 'Forgot about it' },
{ id: 'distrust', name: 'Didn\'t trust the offer' }
],
orientation: 'vertical',
isVisible: () => {
const actions = actionsSection.checkboxList('actionsTaken')?.value() || [];
return actions.includes('nothing');
}
});
});
// ============================================
// SECTION 6: Purchase Intent
// ============================================
const intentSection = form.addSubform('intentSection', {
title: 'Future Purchase Intent',
isVisible: () => awarenessSection.radioButton('sawCampaign')?.value() !== null
});
intentSection.addRow(row => {
row.addSlider('purchaseIntent', {
label: 'How likely are you to make a purchase during this promotion?',
min: 0,
max: 100,
step: 10,
showValue: true,
unit: '%',
defaultValue: 50
});
});
intentSection.addRow(row => {
row.addSuggestionChips('whatWouldHelp', {
label: 'What would increase your likelihood to purchase?',
suggestions: [
{ id: 'bigger-discount', name: 'Bigger discount' },
{ id: 'free-shipping', name: 'Free shipping' },
{ id: 'different-products', name: 'Different products' },
{ id: 'longer-time', name: 'More time to decide' },
{ id: 'reviews', name: 'More reviews' },
{ id: 'reminder', name: 'A reminder' },
{ id: 'nothing', name: 'Nothing - I\'ll buy!' }
],
max: 3,
alignment: 'left'
});
});
// ============================================
// SECTION 7: Improvement Suggestions
// ============================================
const improvementSection = form.addSubform('improvementSection', {
title: 'How Can We Improve?',
isVisible: () => awarenessSection.radioButton('sawCampaign')?.value() !== null
});
improvementSection.addRow(row => {
row.addTextarea('improvementSuggestions', {
label: 'Any suggestions for making our promotions more appealing to you?',
placeholder: 'Share your ideas...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Campaign Feedback Summary',
isVisible: () => {
const saw = awarenessSection.radioButton('sawCampaign')?.value();
return saw !== null;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const awareness = awarenessSection.radioButton('sawCampaign')?.value();
const channels = channelSection.checkboxList('channels')?.value() || [];
const reaction = reactionSection.emojiRating('initialReaction')?.value();
const clarity = recallSection.ratingScale('messageClarity')?.value();
const actions = actionsSection.checkboxList('actionsTaken')?.value() || [];
const intent = intentSection.slider('purchaseIntent')?.value();
const awarenessLabels: Record<string, string> = {
'yes-clear': 'Yes - Clear recall',
'yes-vague': 'Yes - Vague recall',
'not-sure': 'Not sure',
'no': 'Did not see'
};
const reactionEmojis: Record<string, string> = {
'annoyed': '😒',
'uninterested': '😐',
'curious': '🤔',
'interested': '😊',
'excited': '🤩'
};
let summary = `📢 Campaign Feedback\n`;
summary += `${'═'.repeat(25)}\n\n`;
if (awareness) summary += `👁️ Awareness: ${awarenessLabels[awareness] || awareness}\n`;
if (channels.length > 0) summary += `📱 Channels: ${channels.length} sources\n`;
if (reaction) summary += `${reactionEmojis[reaction] || ''} Reaction: ${reaction}\n`;
if (clarity) summary += `📝 Message Clarity: ${clarity}/5\n`;
if (actions.length > 0) {
const purchased = actions.includes('purchased');
summary += `🛒 Action: ${purchased ? 'Made purchase' : actions.length + ' actions'}\n`;
}
if (intent) summary += `\n🎯 Purchase Intent: ${intent}%`;
return summary;
},
customStyles: () => {
const intent = intentSection.slider('purchaseIntent')?.value() ?? 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (intent >= 70) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (intent >= 40) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => awarenessSection.radioButton('sawCampaign')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You!',
message: 'Your feedback helps us create better promotions. Keep an eye out for exclusive offers based on what customers like you tell us!'
});
}