export function gdprConsentFormForm(form: FormTs) {
// GDPR Privacy Consent Form - Data Protection Compliance
// Demonstrates: Checkbox (required/optional), CheckboxList, ThumbRating, RadioButton, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Privacy & Data Protection Consent',
computedValue: () => 'Please review and provide your consent for how we handle your personal data.',
customStyles: {
backgroundColor: '#0f766e',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: User Information
// ============================================
const userSection = form.addSubform('userInfo', {
title: 'Your Information'
});
userSection.addRow(row => {
row.addTextbox('fullName', {
label: 'Full Name',
placeholder: 'Enter your full legal name',
isRequired: true
}, '1fr');
row.addEmail('email', {
label: 'Email Address',
placeholder: 'your@email.com',
isRequired: true
}, '1fr');
});
userSection.addRow(row => {
row.addDropdown('country', {
label: 'Country of Residence',
options: [
{ id: 'eu', name: 'European Union Member State' },
{ id: 'uk', name: 'United Kingdom' },
{ id: 'us', name: 'United States' },
{ id: 'ca', name: 'Canada' },
{ id: 'au', name: 'Australia' },
{ id: 'other', name: 'Other Country' }
],
isRequired: true
}, '1fr');
row.addRadioButton('userType', {
label: 'I am a:',
options: [
{ id: 'individual', name: 'Private Individual' },
{ id: 'business', name: 'Business Representative' }
],
orientation: 'horizontal',
isRequired: true
}, '1fr');
});
// ============================================
// SECTION 2: Essential Data Processing
// ============================================
const essentialSection = form.addSubform('essential', {
title: 'Essential Data Processing',
customStyles: {
backgroundColor: '#f0fdfa',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #0f766e'
}
});
essentialSection.addRow(row => {
row.addTextPanel('essentialInfo', {
computedValue: () => 'The following consent is required to use our services. We collect and process your data to provide the service you requested.',
customStyles: {
fontSize: '14px',
color: '#374151',
marginBottom: '12px'
}
});
});
essentialSection.addRow(row => {
row.addCheckbox('termsAccept', {
label: 'I accept the Terms of Service and Privacy Policy *',
isRequired: true
});
});
essentialSection.addRow(row => {
row.addCheckbox('dataProcessing', {
label: 'I consent to the processing of my personal data for service delivery *',
isRequired: true
});
});
essentialSection.addRow(row => {
row.addCheckbox('ageConfirm', {
label: 'I confirm that I am at least 16 years of age (or have parental consent) *',
isRequired: true
});
});
// ============================================
// SECTION 3: Marketing & Communications
// ============================================
const marketingSection = form.addSubform('marketing', {
title: 'Marketing & Communications (Optional)',
isVisible: () => essentialSection.checkbox('termsAccept')?.value() === true
});
marketingSection.addRow(row => {
row.addTextPanel('marketingInfo', {
computedValue: () => 'These consents are optional. You can use our services without opting in to marketing.',
customStyles: {
fontSize: '14px',
color: '#6b7280',
marginBottom: '12px'
}
});
});
marketingSection.addRow(row => {
row.addCheckbox('emailMarketing', {
label: 'I agree to receive marketing emails about products, services, and offers'
});
});
marketingSection.addRow(row => {
row.addCheckbox('smsMarketing', {
label: 'I agree to receive SMS/text message marketing communications',
isVisible: () => marketingSection.checkbox('emailMarketing')?.value() === true
});
});
marketingSection.addRow(row => {
row.addCheckbox('partnerOffers', {
label: 'I agree to receive offers from carefully selected partner organizations',
isVisible: () => marketingSection.checkbox('emailMarketing')?.value() === true
});
});
marketingSection.addRow(row => {
row.addDropdown('marketingFrequency', {
label: 'Preferred email frequency',
options: [
{ id: 'weekly', name: 'Weekly digest' },
{ id: 'monthly', name: 'Monthly newsletter' },
{ id: 'important', name: 'Important updates only' }
],
isVisible: () => marketingSection.checkbox('emailMarketing')?.value() === true
});
});
// ============================================
// SECTION 4: Cookies & Tracking
// ============================================
const cookiesSection = form.addSubform('cookies', {
title: 'Cookies & Analytics (Optional)',
isVisible: () => essentialSection.checkbox('termsAccept')?.value() === true
});
cookiesSection.addRow(row => {
row.addCheckboxList('cookiePreferences', {
label: 'Select which cookies you consent to:',
options: [
{ id: 'essential', name: 'Essential cookies (required for site functionality)', isRequired: true },
{ id: 'analytics', name: 'Analytics cookies (help us improve our service)' },
{ id: 'functional', name: 'Functional cookies (remember your preferences)' },
{ id: 'advertising', name: 'Advertising cookies (personalized ads)' }
],
orientation: 'vertical',
defaultValue: ['essential']
});
});
// ============================================
// SECTION 5: Data Sharing Preferences
// ============================================
const sharingSection = form.addSubform('sharing', {
title: 'Data Sharing Preferences',
isVisible: () => essentialSection.checkbox('dataProcessing')?.value() === true
});
sharingSection.addRow(row => {
row.addRadioButton('thirdPartySharing', {
label: 'Do you consent to sharing your data with third-party service providers?',
options: [
{ id: 'yes-all', name: 'Yes, share with all service providers' },
{ id: 'yes-essential', name: 'Only essential service providers' },
{ id: 'no', name: 'No, do not share my data' }
],
orientation: 'vertical'
});
});
sharingSection.addRow(row => {
row.addCheckboxList('dataCategories', {
label: 'Which data categories may we process?',
options: [
{ id: 'contact', name: 'Contact information (name, email, phone)' },
{ id: 'usage', name: 'Service usage data' },
{ id: 'preferences', name: 'Preferences and interests' },
{ id: 'location', name: 'Location data' },
{ id: 'financial', name: 'Financial/billing information' }
],
orientation: 'vertical',
isVisible: () => sharingSection.radioButton('thirdPartySharing')?.value() !== 'no'
});
});
// ============================================
// SECTION 6: Consent Verification
// ============================================
const verificationSection = form.addSubform('verification', {
title: 'Consent Verification',
isVisible: () =>
essentialSection.checkbox('termsAccept')?.value() === true &&
essentialSection.checkbox('dataProcessing')?.value() === true
});
verificationSection.addRow(row => {
row.addThumbRating('policyClarity', {
label: 'Was our privacy policy clear and easy to understand?',
showLabels: true,
upLabel: 'Yes, it was clear',
downLabel: 'No, it was confusing',
alignment: 'center',
size: 'lg'
});
});
verificationSection.addRow(row => {
row.addTextarea('questions', {
label: 'Do you have any questions about how we use your data?',
placeholder: 'Type any questions or concerns here...',
rows: 2,
isVisible: () => verificationSection.thumbRating('policyClarity')?.value() === 'down'
});
});
verificationSection.addRow(row => {
row.addRatingScale('consentConfidence', {
label: 'How confident are you in your consent decisions?',
preset: 'likert-5',
lowLabel: 'Not confident',
highLabel: 'Very confident',
alignment: 'center'
});
});
// ============================================
// SECTION 7: Consent Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Consent Summary',
isVisible: () =>
essentialSection.checkbox('termsAccept')?.value() === true &&
essentialSection.checkbox('dataProcessing')?.value() === true &&
essentialSection.checkbox('ageConfirm')?.value() === true
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const name = userSection.textbox('fullName')?.value() || 'User';
const email = userSection.email('email')?.value();
const country = userSection.dropdown('country')?.value();
const emailMarketing = marketingSection.checkbox('emailMarketing')?.value();
const cookies = cookiesSection.checkboxList('cookiePreferences')?.value() || ['essential'];
const sharing = sharingSection.radioButton('thirdPartySharing')?.value();
let summary = 'π Consent Summary\n';
summary += 'β'.repeat(28) + '\n\n';
summary += `π€ Name: ${name}\n`;
if (email) summary += `π§ Email: ${email}\n`;
if (country) summary += `π Region: ${country.toUpperCase()}\n`;
summary += '\nβ
REQUIRED CONSENTS\n';
summary += 'β’ Terms & Privacy Policy accepted\n';
summary += 'β’ Data processing consent granted\n';
summary += 'β’ Age confirmation provided\n';
summary += '\nπ§ MARKETING\n';
summary += emailMarketing ? 'β’ Email marketing: Opted In\n' : 'β’ Email marketing: Opted Out\n';
summary += `\nπͺ COOKIES (${cookies.length} categories)\n`;
cookies.forEach(c => {
const labels: Record<string, string> = {
'essential': 'β’ Essential (required)',
'analytics': 'β’ Analytics',
'functional': 'β’ Functional',
'advertising': 'β’ Advertising'
};
summary += labels[c] + '\n';
});
if (sharing) {
summary += '\nπ DATA SHARING\n';
const sharingLabels: Record<string, string> = {
'yes-all': 'β’ Sharing: All providers',
'yes-essential': 'β’ Sharing: Essential only',
'no': 'β’ Sharing: Declined'
};
summary += sharingLabels[sharing] + '\n';
}
return summary;
},
customStyles: {
padding: '16px',
borderRadius: '8px',
backgroundColor: '#f0fdfa',
borderLeft: '4px solid #0f766e',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
}
});
});
// Final confirmation
summarySection.addSpacer({ height: '16px' });
summarySection.addRow(row => {
row.addCheckbox('finalConfirmation', {
label: 'I confirm that the above summary accurately reflects my consent choices',
isRequired: true
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Consent',
isVisible: () => summarySection.checkbox('finalConfirmation')?.value() === true
});
form.configureCompletionScreen({
type: 'text',
title: 'Consent Recorded',
message: 'Thank you for providing your consent preferences. A confirmation email has been sent to you. You can update your preferences at any time through your account settings or by contacting our privacy team.'
});
}