export function advocacySurvey(form: FormTs) {
// Advocacy & Awareness Survey - Campaign effectiveness and supporter engagement
// Demonstrates: RatingScale (Likert), EmojiRating, MatrixQuestion, CheckboxList, Slider, StarRating, ThumbRating, SuggestionChips, conditional visibility, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Share Your Voice',
computedValue: () => 'Help us understand how our message reaches you and what inspires you to take action.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Awareness Level
// ============================================
const awarenessSection = form.addSubform('awareness', {
title: 'Your Awareness'
});
awarenessSection.addRow(row => {
row.addRatingScale('awarenessLevel', {
label: 'Before today, how familiar were you with our cause/organization?',
preset: 'likert-5',
lowLabel: 'Not at all familiar',
highLabel: 'Very familiar',
size: 'lg',
alignment: 'center',
isRequired: true
});
});
awarenessSection.addRow(row => {
row.addRadioButton('howHeard', {
label: 'How did you first learn about us?',
options: [
{ id: 'social-media', name: 'Social media' },
{ id: 'email', name: 'Email newsletter' },
{ id: 'word-of-mouth', name: 'Friend or family member' },
{ id: 'event', name: 'Community event' },
{ id: 'news', name: 'News/Media coverage' },
{ id: 'search', name: 'Online search' },
{ id: 'other', name: 'Other' }
],
orientation: 'vertical',
isRequired: true
});
});
awarenessSection.addRow(row => {
row.addTextbox('howHeardOther', {
label: 'Please specify how you heard about us:',
placeholder: 'Tell us more...',
isVisible: () => awarenessSection.radioButton('howHeard')?.value() === 'other',
isRequired: () => awarenessSection.radioButton('howHeard')?.value() === 'other'
});
});
// ============================================
// SECTION 2: Emotional Connection
// ============================================
const connectionSection = form.addSubform('connection', {
title: 'Your Connection to Our Cause',
customStyles: () => {
const emoji = connectionSection.emojiRating('emotionalConnection')?.value();
if (emoji === 'excellent' || emoji === 'good') {
return { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' };
}
if (emoji === 'bad' || emoji === 'very-bad') {
return { backgroundColor: '#fef2f2', padding: '16px', borderRadius: '8px' };
}
return { padding: '16px', borderRadius: '8px', border: '1px dashed #e5e7eb' };
}
});
connectionSection.addRow(row => {
row.addEmojiRating('emotionalConnection', {
label: 'How strongly do you feel connected to our mission?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
connectionSection.addRow(row => {
row.addTextarea('connectionStory', {
label: () => {
const emoji = connectionSection.emojiRating('emotionalConnection')?.value();
if (emoji === 'excellent' || emoji === 'good') {
return "That's wonderful! What about our cause resonates with you personally?";
}
if (emoji === 'bad' || emoji === 'very-bad') {
return "We'd like to understand better. What barriers do you see to connecting with our cause?";
}
return 'Would you like to share what this cause means to you?';
},
placeholder: 'Share your personal connection or story...',
rows: 3,
autoExpand: true,
isVisible: () => connectionSection.emojiRating('emotionalConnection')?.value() !== null
});
});
// ============================================
// SECTION 3: Issue Importance (Matrix)
// ============================================
const issuesSection = form.addSubform('issues', {
title: 'Issues That Matter to You'
});
issuesSection.addRow(row => {
row.addTextPanel('issuesInstructions', {
computedValue: () => 'Rate how important each of these issues is to you personally.',
customStyles: {
backgroundColor: '#f0f9ff',
padding: '12px 16px',
borderRadius: '8px',
borderLeft: '4px solid #0ea5e9',
fontSize: '14px'
}
});
});
issuesSection.addRow(row => {
row.addMatrixQuestion('issueImportance', {
label: 'Issue Importance',
rows: [
{ id: 'climate', label: 'Climate & Environment', description: 'Environmental protection and sustainability', isRequired: true },
{ id: 'education', label: 'Education Access', description: 'Equal opportunities for learning', isRequired: true },
{ id: 'health', label: 'Healthcare & Wellbeing', description: 'Physical and mental health support', isRequired: true },
{ id: 'equality', label: 'Social Equality', description: 'Justice and equal rights for all', isRequired: true },
{ id: 'poverty', label: 'Poverty Reduction', description: 'Economic opportunity and food security', isRequired: true }
],
columns: [
{ id: 'not-important', label: 'Not Important' },
{ id: 'slightly', label: 'Slightly' },
{ id: 'moderate', label: 'Moderate' },
{ id: 'very', label: 'Very' },
{ id: 'critical', label: 'Critical' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Advocacy Readiness
// ============================================
const advocacySection = form.addSubform('advocacy', {
title: 'Your Advocacy Potential'
});
advocacySection.addRow(row => {
row.addSlider('actionLikelihood', {
label: 'How likely are you to take action in support of our cause in the next 30 days?',
min: 0,
max: 100,
step: 10,
showValue: true,
unit: '%',
defaultValue: 50
});
});
advocacySection.addRow(row => {
row.addSuggestionChips('preferredActions', {
label: () => {
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 50;
if (likelihood >= 70) return 'Which actions are you most ready to take? (Select all that apply)';
if (likelihood >= 40) return 'Which actions might you consider? (Select any that interest you)';
return 'Which actions would you find most accessible? (No pressure!)';
},
suggestions: [
{ id: 'donate', name: 'Make a donation' },
{ id: 'volunteer', name: 'Volunteer time' },
{ id: 'share', name: 'Share on social media' },
{ id: 'sign', name: 'Sign a petition' },
{ id: 'attend', name: 'Attend an event' },
{ id: 'contact', name: 'Contact elected officials' },
{ id: 'educate', name: 'Educate others' },
{ id: 'fundraise', name: 'Organize a fundraiser' }
],
alignment: 'center'
});
});
advocacySection.addSpacer();
advocacySection.addRow(row => {
row.addThumbRating('referFriend', {
label: 'Would you recommend our organization to a friend?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Communication Preferences
// ============================================
const communicationSection = form.addSubform('communication', {
title: 'Stay Connected',
isVisible: () => {
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 0;
return likelihood >= 30;
}
});
communicationSection.addRow(row => {
row.addCheckboxList('preferredChannels', {
label: 'How would you prefer to stay informed about our work?',
options: [
{ id: 'email-monthly', name: 'Monthly email newsletter' },
{ id: 'email-urgent', name: 'Urgent action alerts only' },
{ id: 'social-facebook', name: 'Facebook updates' },
{ id: 'social-instagram', name: 'Instagram stories' },
{ id: 'social-twitter', name: 'Twitter/X updates' },
{ id: 'sms', name: 'Text message alerts' },
{ id: 'events', name: 'Event invitations' }
],
orientation: 'vertical'
});
});
communicationSection.addRow(row => {
row.addDropdown('contactFrequency', {
label: 'How often would you like to hear from us?',
options: [
{ id: 'weekly', name: 'Weekly updates' },
{ id: 'biweekly', name: 'Every two weeks' },
{ id: 'monthly', name: 'Monthly digest' },
{ id: 'quarterly', name: 'Quarterly summary' },
{ id: 'major-only', name: 'Major announcements only' }
],
defaultValue: 'monthly'
});
});
// ============================================
// SECTION 6: Organization Rating
// ============================================
const ratingSection = form.addSubform('rating', {
title: 'Rate Our Organization',
isVisible: () => awarenessSection.ratingScale('awarenessLevel')?.value() !== null &&
(awarenessSection.ratingScale('awarenessLevel')?.value() ?? 0) >= 3
});
ratingSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'How would you rate our organization overall?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
ratingSection.addRow(row => {
row.addRatingScale('npsScore', {
label: 'How likely are you to recommend our organization to others?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
alignment: 'center',
isVisible: () => (ratingSection.starRating('overallRating')?.value() ?? 0) >= 3
});
});
ratingSection.addSpacer();
ratingSection.addRow(row => {
row.addTextarea('feedback', {
label: () => {
const category = ratingSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return "Thank you for your support! Any suggestions to make us even better?";
if (category === 'detractor') return "We appreciate your honesty. What could we do to improve?";
return 'Any additional feedback for us?';
},
placeholder: 'Share your thoughts...',
rows: 3,
autoExpand: true,
isVisible: () => ratingSection.ratingScale('npsScore')?.value() !== null
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Advocacy Profile',
isVisible: () => advocacySection.slider('actionLikelihood')?.value() !== undefined
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const awareness = awarenessSection.ratingScale('awarenessLevel')?.value();
const connection = connectionSection.emojiRating('emotionalConnection')?.value();
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 0;
const actions = advocacySection.suggestionChips('preferredActions')?.value() || [];
const recommend = advocacySection.thumbRating('referFriend')?.value();
const nps = ratingSection.ratingScale('npsScore')?.value();
const npsCategory = ratingSection.ratingScale('npsScore')?.npsCategory();
if (awareness === null || awareness === undefined) return '';
let summary = `Advocacy Profile Summary\n`;
summary += `${'═'.repeat(28)}\n\n`;
// Awareness level
const awarenessLabels = ['Not familiar', 'Slightly familiar', 'Somewhat familiar', 'Familiar', 'Very familiar'];
summary += `Awareness: ${awarenessLabels[(awareness ?? 1) - 1] || 'Unknown'}\n`;
// Connection
if (connection) {
const connectionLabels: Record<string, string> = {
'very-bad': 'Disconnected',
'bad': 'Weakly connected',
'neutral': 'Neutral',
'good': 'Connected',
'excellent': 'Deeply connected'
};
summary += `Connection: ${connectionLabels[connection] || connection}\n`;
}
// Action likelihood
let actionLabel = 'Low';
if (likelihood >= 70) actionLabel = 'High';
else if (likelihood >= 40) actionLabel = 'Moderate';
summary += `\nAction Readiness: ${actionLabel} (${likelihood}%)\n`;
if (actions.length > 0) {
summary += `Preferred Actions: ${actions.length} selected\n`;
}
// Recommendation
if (recommend !== null) {
summary += `\nWould Recommend: ${recommend === 'up' ? 'Yes' : 'No'}\n`;
}
// NPS if available
if (nps !== null && nps !== undefined) {
summary += `NPS Score: ${nps}/10 (${npsCategory})\n`;
}
return summary;
},
customStyles: () => {
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (likelihood >= 70) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (likelihood >= 40) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#f3f4f6', borderLeft: '4px solid #9ca3af' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 0;
if (likelihood >= 70) return 'Submit & Join the Movement';
return 'Submit Feedback';
},
isVisible: () => awarenessSection.ratingScale('awarenessLevel')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 0;
if (likelihood >= 70) return 'Welcome to the Movement!';
return 'Thank You for Your Feedback!';
},
message: () => {
const likelihood = advocacySection.slider('actionLikelihood')?.value() ?? 0;
if (likelihood >= 70) {
return 'Your voice matters! We will be in touch soon with ways you can make a difference. Together, we can create lasting change.';
}
return 'Thank you for sharing your thoughts with us. Your feedback helps us communicate more effectively and grow our impact.';
}
});
}