Web Grievance Form

DOCTYPE html> Statement of Occurrence - CWA Local 6215 :root { --navy: #1b3e6f; --navy-dark: #142f54; --border-color: #ccc; --error-color: #c0392b; --bg-page: #f4f5f7; --bg-card: #ffffff; --text-primary: #1a1a1a; --text-secondary: #444; } * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg-page); color: var(--text-primary); -webkit-text-size-adjust: 100%; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 0 40px; } header.banner { background: var(--navy); color: #ffffff; text-align: center; padding: 18px 12px; font-size: 20px; font-weight: bold; letter-spacing: 0.5px; } .card { background: var(--bg-card); margin: 16px; padding: 20px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .must-fill { text-align: center; text-decoration: underline; font-weight: bold; margin: 4px 0 20px; font-size: 15px; } fieldset { border: 1px solid var(--border-color); border-radius: 6px; margin: 0 0 18px; padding: 14px 16px 16px; } legend { font-weight: bold; font-size: 14px; padding: 0 6px; color: var(--navy); } .row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .field { flex: 1 1 200px; display: flex; flex-direction: column; } label { font-size: 13px; font-weight: bold; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; } label .req { color: var(--error-color); margin-left: 2px; } input[type=text], input[type=date], input[type=tel], textarea, select { font-size: 15px; padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 4px; width: 100%; font-family: inherit; background: #fff; color: var(--text-primary); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(27,62,111,0.2); } textarea { min-height: 90px; resize: vertical; } .hint { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; } .checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 14px; } .checkbox-item input { width: 18px; height: 18px; flex-shrink: 0; } .checkbox-item label { margin: 0; text-transform: none; font-weight: normal; } .other-specify { margin-top: 12px; display: none; } .other-specify.show { display: block; } .attach-box { border: 1px dashed var(--border-color); border-radius: 4px; padding: 14px; text-align: center; font-size: 14px; color: var(--text-secondary); } .attach-box input[type=file] { margin-top: 8px; } .auth-text { font-size: 13px; line-height: 1.5; background: #f0f2f5; padding: 12px 14px; border-radius: 4px; margin-bottom: 14px; } .error-msg { color: var(--error-color); font-size: 12px; margin-top: 4px; display: none; } .error-msg.show { display: block; } .field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--error-color); } .group-error { color: var(--error-color); font-size: 13px; margin-top: 8px; display: none; } .group-error.show { display: block; } .submit-row { text-align: center; margin-top: 8px; } button.submit-btn { background: var(--navy); color: #fff; border: none; font-size: 16px; font-weight: bold; padding: 13px 40px; border-radius: 4px; cursor: pointer; } button.submit-btn:hover { background: var(--navy-dark); } .success-banner { display: none; background: #e6f4ea; border: 1px solid #34a853; color: #1e7e34; padding: 14px; border-radius: 4px; margin: 16px; font-size: 14px; text-align: center; } .success-banner.show { display: block; } footer.doc-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); padding: 0 20px; } @media (max-width: 480px) { header.banner { font-size: 17px; } .card { margin: 8px; padding: 14px; } } 

Statement of Occurrence — CWA Local 6215

Must be filled out completely

Your information

Today's date* 

Enter today's date.

Cell #* 

Enter a phone number.

ATT UID #* 

Enter your ATT UID.

Full name* 

Enter your full name.

Mailing address* 

Enter your mailing address.

City* 

Enter your city.

Zip code* 

Enter your zip code.

Hire date* 

Enter your hire date.

Physical work address* 

Enter your work address.

Job title* 

Enter your job title.

Dept* 

Enter your department.

Supervisor* 

Enter your supervisor's name.

Supervisor ATT UID* 

Enter the supervisor ATT UID.

Chief steward* 

Enter the chief steward's name.

Date of action taken* 

Enter the date of action taken.

Details of the incident

What are you accused of?* 

Please describe what you are accused of.

What happened, from your point of view?* 

Attach additional pages below if you need more room.

Please describe what happened.

I was: (check all that apply)*

Suspended

Terminated

Placed on DML

Bypassed

Other

Written reminder/warning

Counseling

Employee discussion

Select at least one option above.

Please specify "other"* 

Please specify the "other" option.

Additional information

Anything else that may be relevant? 

Optional. Add any other details that support your statement.

Please attach any supporting documents with your email.

Authorization

I hereby authorize CWA Local 6215 to inspect and/or obtain all records pertaining to my employment. This includes, but is not limited to, all personal files.

Signed (type your full name)* 

Type your full name to sign.

Date* 

Enter the date.

List preferred officer to handle this grievance* Select an officer Alex Doblado David Marshall Lamar Banks Reginald Small Ron Swaggerty

Select a preferred officer.

Submit

Your statement has been prepared. Your email application should now be open with the details pre-filled — please review and send it to complete your submission.

Confidential CWA Local 6215

(function () { var form = document.getElementById('occurrenceForm'); var otherCheckbox = document.getElementById('cb_other'); var otherWrap = document.getElementById('otherSpecifyWrap'); var statusError = document.getElementById('statusError'); var successBanner = document.getElementById('successBanner'); otherCheckbox.addEventListener('change', function () { if (otherCheckbox.checked) { otherWrap.classList.add('show'); otherWrap.querySelector('input').required = true; } else { otherWrap.classList.remove('show'); otherWrap.querySelector('input').required = false; otherWrap.querySelector('.field') && otherWrap.classList.remove('invalid'); } }); function clearFieldError(field) { field.classList.remove('invalid'); var msg = field.querySelector('.error-msg'); if (msg) msg.classList.remove('show'); } function showFieldError(field) { field.classList.add('invalid'); var msg = field.querySelector('.error-msg'); if (msg) msg.classList.add('show'); } Array.prototype.forEach.call(form.querySelectorAll('.field input, .field textarea, .field select'), function (input) { input.addEventListener('input', function () { var field = input.closest('.field'); if (field) clearFieldError(field); }); input.addEventListener('change', function () { var field = input.closest('.field'); if (field) clearFieldError(field); }); }); form.addEventListener('submit', function (e) { e.preventDefault(); successBanner.classList.remove('show'); var firstInvalid = null; var valid = true; Array.prototype.forEach.call(form.querySelectorAll('.field'), function (field) { var input = field.querySelector('input[required], textarea[required], select[required]'); if (!input) return; var filled = input.value && input.value.trim().length > 0; if (!filled) { showFieldError(field); valid = false; if (!firstInvalid) firstInvalid = input; } else { clearFieldError(field); } }); var checkedStatus = form.querySelectorAll('input[name="status"]:checked'); if (checkedStatus.length === 0) { statusError.classList.add('show'); valid = false; if (!firstInvalid) firstInvalid = form.querySelector('input[name="status"]'); } else { statusError.classList.remove('show'); } if (!valid) { if (firstInvalid) { firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' }); firstInvalid.focus(); } return; } var data = new FormData(form); var statusValues = []; checkedStatus.forEach(function (cb) { statusValues.push(cb.value); }); var lines = []; lines.push('STATEMENT OF OCCURRENCE - CWA LOCAL 6215'); lines.push(''); lines.push("Today's date: " + data.get('today_date')); lines.push('Cell #: ' + data.get('cell')); lines.push('ATT UID #: ' + data.get('att_uid')); lines.push('Full name: ' + data.get('full_name')); lines.push('Mailing address: ' + data.get('mailing_address')); lines.push('City: ' + data.get('city')); lines.push('Zip code: ' + data.get('zip_code')); lines.push('Hire date: ' + data.get('hire_date')); lines.push('Physical work address: ' + data.get('work_address')); lines.push('Job title: ' + data.get('job_title')); lines.push('Dept: ' + data.get('dept')); lines.push('Supervisor: ' + data.get('supervisor')); lines.push('Supervisor ATT UID: ' + data.get('supervisor_att_uid')); lines.push('Chief steward: ' + data.get('chief_steward')); lines.push('Date of action taken: ' + data.get('action_date')); lines.push(''); lines.push('What are you accused of?'); lines.push(data.get('accused_of')); lines.push(''); lines.push('What happened, from your point of view?'); lines.push(data.get('your_account')); lines.push(''); lines.push('I was: ' + statusValues.join(', ')); if (data.get('other_specify')) { lines.push('Other, specified: ' + data.get('other_specify')); } lines.push(''); if (data.get('additional_info')) { lines.push('Additional information: ' + data.get('additional_info')); lines.push(''); } lines.push('Signed: ' + data.get('signed_name')); lines.push('Date: ' + data.get('signed_date')); lines.push('Preferred officer to handle this grievance: ' + data.get('preferred_officer')); var subject = 'Statement of Occurrence - ' + data.get('full_name'); var body = lines.join('\n'); var mailto = 'mailto:?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body); window.location.href = mailto; successBanner.classList.add('show'); successBanner.scrollIntoView({ behavior: 'smooth', block: 'center' }); }); })();