Policy Acknowledgment Form
This policy acknowledgment form streamlines the process of distributing and tracking employee policy acceptance. It displays the full policy content within the form, requires explicit acknowledgment of key points, and captures the employee's confirmation with a timestamp. The form supports multiple acknowledgment checkboxes for different policy sections, making it ideal for onboarding, annual policy reviews, or when policies are updated.
Try the Form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
export function policyAcknowledgment(form: FormTs) {
// Policy Acknowledgment Form - Compliance Confirmation
// Demonstrates: TextPanel for policy display, required checkboxes, dynamic labels, Slider, Datepicker
// ============================================
// STATE
// ============================================
const allAcknowledged = form.state(false);
const acknowledgmentCount = form.state(0);
const totalRequired = 5;
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Policy Acknowledgment',
computedValue: () => 'Please review and acknowledge the following policy',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Policy Selection
// ============================================
const policySelection = form.addSubform('policySelection', {
title: 'Policy Information'
});
policySelection.addRow(row => {
row.addDropdown('policyType', {
label: 'Policy Document',
options: [
{ id: 'code-of-conduct', name: 'Code of Conduct' },
{ id: 'data-privacy', name: 'Data Privacy Policy' },
{ id: 'it-security', name: 'IT Security Policy' },
{ id: 'anti-harassment', name: 'Anti-Harassment Policy' },
{ id: 'remote-work', name: 'Remote Work Policy' },
{ id: 'social-media', name: 'Social Media Policy' }
],
isRequired: true,
placeholder: 'Select a policy to review'
}, '1fr');
row.addTextbox('policyVersion', {
label: 'Policy Version',
defaultValue: 'v2.1',
isReadOnly: true
}, '150px');
});
policySelection.addRow(row => {
row.addDatepicker('effectiveDate', {
label: 'Policy Effective Date',
defaultValue: '2024-01-01',
isReadOnly: true
}, '1fr');
row.addDatepicker('reviewDeadline', {
label: 'Acknowledgment Deadline',
defaultValue: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10),
isReadOnly: true
}, '1fr');
});
// ============================================
// SECTION 2: Policy Content Display
// ============================================
const policyContent = form.addSubform('policyContent', {
title: () => {
const policy = policySelection.dropdown('policyType')?.value();
if (!policy) return 'Policy Content';
const names: Record<string, string> = {
'code-of-conduct': 'Code of Conduct',
'data-privacy': 'Data Privacy Policy',
'it-security': 'IT Security Policy',
'anti-harassment': 'Anti-Harassment Policy',
'remote-work': 'Remote Work Policy',
'social-media': 'Social Media Policy'
};
return names[policy] || 'Policy Content';
},
isVisible: () => !!policySelection.dropdown('policyType')?.value(),
customStyles: { backgroundColor: '#f5f3ff', padding: '16px', borderRadius: '8px' }
});
policyContent.addRow(row => {
row.addTextPanel('policyText', {
computedValue: () => {
const policy = policySelection.dropdown('policyType')?.value();
if (policy === 'code-of-conduct') {
return `CODE OF CONDUCT POLICY
1. PROFESSIONAL BEHAVIOR
All employees are expected to conduct themselves in a professional manner that reflects positively on the organization. This includes treating colleagues, clients, and partners with respect and dignity.
2. INTEGRITY AND HONESTY
Employees must act with integrity in all business dealings. This includes accurate reporting, honest communication, and ethical decision-making.
3. CONFIDENTIALITY
Proprietary information, trade secrets, and confidential business data must be protected. Employees may not disclose confidential information to unauthorized parties.
4. CONFLICT OF INTEREST
Employees must avoid situations where personal interests conflict with company interests. Any potential conflicts must be disclosed to management.
5. COMPLIANCE
All employees must comply with applicable laws, regulations, and company policies. Violations may result in disciplinary action up to and including termination.`;
}
if (policy === 'data-privacy') {
return `DATA PRIVACY POLICY
1. DATA COLLECTION
We collect only data necessary for business purposes. All data collection must have a lawful basis and be documented.
2. DATA PROTECTION
Personal data must be protected using appropriate technical and organizational measures. This includes encryption, access controls, and secure storage.
3. DATA RETENTION
Data should only be retained for as long as necessary. Retention periods are defined by data type and legal requirements.
4. DATA SUBJECT RIGHTS
Individuals have rights regarding their personal data including access, correction, deletion, and portability. All requests must be handled within legal timeframes.
5. BREACH NOTIFICATION
Any suspected data breach must be reported immediately to the Data Protection Officer. Affected individuals and authorities will be notified as required by law.`;
}
if (policy === 'it-security') {
return `IT SECURITY POLICY
1. PASSWORD REQUIREMENTS
Passwords must be at least 12 characters with complexity requirements. Passwords must be changed every 90 days and never shared.
2. DEVICE SECURITY
All company devices must have approved security software. Personal devices accessing company data must meet security standards.
3. NETWORK ACCESS
Secure VPN must be used for remote access. Public WiFi should be avoided for sensitive work.
4. EMAIL AND PHISHING
Be vigilant about phishing attempts. Never click suspicious links or download unexpected attachments. Report suspected phishing immediately.
5. INCIDENT REPORTING
Any security incident or suspected compromise must be reported to IT Security within 24 hours. Failure to report may result in disciplinary action.`;
}
return `Please select a policy from the dropdown above to view its content.
The full policy text will appear here once you select a policy document.`;
},
customStyles: {
backgroundColor: 'white',
padding: '20px',
borderRadius: '8px',
border: '1px solid #e5e7eb',
whiteSpace: 'pre-wrap',
fontFamily: 'system-ui',
fontSize: '14px',
lineHeight: '1.6'
}
});
});
// ============================================
// SECTION 3: Understanding Check
// ============================================
const understandingSection = form.addSubform('understanding', {
title: 'Policy Understanding',
isVisible: () => !!policySelection.dropdown('policyType')?.value()
});
understandingSection.addRow(row => {
row.addSlider('comprehension', {
label: 'How well do you understand this policy?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true,
unit: '/10'
});
});
understandingSection.addRow(row => {
row.addThumbRating('needsClarification', {
label: 'Do you need any clarification on this policy?',
upLabel: 'Yes, I have questions',
downLabel: 'No, I understand fully',
showLabels: true,
alignment: 'center',
size: 'lg'
});
});
understandingSection.addSpacer();
understandingSection.addRow(row => {
row.addTextarea('questions', {
label: 'Questions or areas needing clarification:',
placeholder: 'Enter any questions you have about this policy...',
rows: 3,
isVisible: () => understandingSection.thumbRating('needsClarification')?.value() === 'up'
});
});
// ============================================
// SECTION 4: Acknowledgment Checkboxes
// ============================================
const acknowledgmentSection = form.addSubform('acknowledgments', {
title: () => `Required Acknowledgments (${acknowledgmentCount()}/${totalRequired})`,
isVisible: () => !!policySelection.dropdown('policyType')?.value(),
customStyles: () => {
if (allAcknowledged()) {
return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
}
return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
}
});
acknowledgmentSection.addRow(row => {
row.addTextPanel('ackInstructions', {
computedValue: () => allAcknowledged()
? 'All required acknowledgments completed.'
: 'Please check each box to confirm your understanding and agreement.',
customStyles: () => ({
fontStyle: 'italic',
color: allAcknowledged() ? '#065f46' : '#92400e',
marginBottom: '12px'
})
});
});
const updateAckCount = () => {
let count = 0;
if (acknowledgmentSection.checkbox('ack1')?.value()) count++;
if (acknowledgmentSection.checkbox('ack2')?.value()) count++;
if (acknowledgmentSection.checkbox('ack3')?.value()) count++;
if (acknowledgmentSection.checkbox('ack4')?.value()) count++;
if (acknowledgmentSection.checkbox('ack5')?.value()) count++;
acknowledgmentCount.set(count);
allAcknowledged.set(count === totalRequired);
};
acknowledgmentSection.addRow(row => {
row.addCheckbox('ack1', {
label: 'I have read and understand the complete policy document',
isRequired: true,
onValueChange: updateAckCount
});
});
acknowledgmentSection.addRow(row => {
row.addCheckbox('ack2', {
label: 'I agree to comply with all requirements outlined in this policy',
isRequired: true,
onValueChange: updateAckCount
});
});
acknowledgmentSection.addRow(row => {
row.addCheckbox('ack3', {
label: 'I understand that violations may result in disciplinary action',
isRequired: true,
onValueChange: updateAckCount
});
});
acknowledgmentSection.addRow(row => {
row.addCheckbox('ack4', {
label: 'I will report any potential violations or concerns to appropriate personnel',
isRequired: true,
onValueChange: updateAckCount
});
});
acknowledgmentSection.addRow(row => {
row.addCheckbox('ack5', {
label: 'I understand I can request clarification from HR at any time',
isRequired: true,
onValueChange: updateAckCount
});
});
// ============================================
// SECTION 5: Employee Information
// ============================================
const employeeSection = form.addSubform('employeeInfo', {
title: 'Employee Information',
isVisible: () => allAcknowledged()
});
employeeSection.addRow(row => {
row.addTextbox('employeeName', {
label: 'Full Legal Name',
placeholder: 'Enter your full name as it appears in HR records',
isRequired: true
}, '1fr');
row.addTextbox('employeeId', {
label: 'Employee ID',
placeholder: 'e.g., EMP-12345'
}, '200px');
});
employeeSection.addRow(row => {
row.addTextbox('department', {
label: 'Department',
placeholder: 'Your department'
}, '1fr');
row.addEmail('employeeEmail', {
label: 'Work Email',
placeholder: 'your.name@company.com',
isRequired: true
}, '1fr');
});
employeeSection.addRow(row => {
row.addDatepicker('acknowledgmentDate', {
label: 'Date of Acknowledgment',
defaultValue: new Date().toISOString().slice(0, 10),
isReadOnly: true
});
});
// ============================================
// SECTION 6: Confirmation Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Acknowledgment Summary',
isVisible: () => allAcknowledged()
});
summarySection.addRow(row => {
row.addTextPanel('summaryText', {
computedValue: () => {
const policy = policySelection.dropdown('policyType')?.value();
const name = employeeSection.textbox('employeeName')?.value();
const policyNames: Record<string, string> = {
'code-of-conduct': 'Code of Conduct',
'data-privacy': 'Data Privacy Policy',
'it-security': 'IT Security Policy',
'anti-harassment': 'Anti-Harassment Policy',
'remote-work': 'Remote Work Policy',
'social-media': 'Social Media Policy'
};
let summary = 'ACKNOWLEDGMENT CONFIRMATION\n';
summary += ''.repeat(35) + '\n\n';
summary += `Policy: ${policyNames[policy || ''] || 'Not selected'}\n`;
summary += `Version: v2.1\n`;
summary += `Employee: ${name || '(Enter your name above)'}\n`;
summary += `Date: ${new Date().toLocaleDateString()}\n\n`;
summary += 'By submitting this form, you confirm that you have read,\n';
summary += 'understood, and agree to comply with the above policy.';
return summary;
},
customStyles: {
backgroundColor: '#d1fae5',
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px',
borderLeft: '4px solid #059669'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Acknowledgment',
isVisible: () => allAcknowledged()
});
form.configureCompletionScreen({
type: 'text',
title: 'Policy Acknowledged',
message: 'Thank you for acknowledging this policy. A confirmation has been sent to your email address and recorded in the compliance system. Please retain this for your records.'
});
}
Frequently Asked Questions
Why is policy acknowledgment important?
Policy acknowledgment creates a documented record that employees have received, read, and understood company policies. This protects both the organization and employees by ensuring everyone is aware of expectations, procedures, and compliance requirements.
Is electronic acknowledgment legally valid?
Yes, electronic signatures and acknowledgments are legally valid in most jurisdictions under laws like the E-SIGN Act (US) and eIDAS (EU). The form captures timestamp, IP address, and explicit consent, creating a valid audit trail.
What if I have questions about the policy?
The form includes a section for questions and clarifications. If you need answers before acknowledging, you can submit your questions and speak with HR before completing the acknowledgment. Do not acknowledge policies you don't understand.
How often do policies need to be acknowledged?
This varies by organization and policy type. Critical policies may require annual re-acknowledgment, while others only need acknowledgment when updated. Your HR department will inform you when acknowledgment is required.
What happens after I submit?
Your acknowledgment is recorded with a timestamp and stored in the compliance system. You'll receive a confirmation, and HR will have a record of your acknowledgment for audit purposes. You may also receive a copy for your records.