<!--

North Coast Ministries — Final Paycheck Acknowledgment form

------------------------------------------------------------

HOW TO USE

1. Paste everything between the "BEGIN FORM" and "END FORM" comments into your page

(or embed this whole file in an iframe).

2. Set where submissions go: replace the form's action URL below

(search for "YOUR-ENDPOINT-HERE"). Works with Formspree, Basin, Getform,

your own backend, etc. Field names are listed in each input's name="".

3. The drawn signature is sent as an image (PNG data URL) in the field "signature_image".

-->

<style>

.ncm-form { --ncm-ink:#1f2933; --ncm-muted:#5f6b76; --ncm-line:#cfd6dd; --ncm-bg:#ffffff;

--ncm-soft:#f5f7f9; --ncm-accent:#1d5c7a; --ncm-err:#b42318;

font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

color: var(--ncm-ink); background: var(--ncm-bg); max-width: 760px; margin: 0 auto;

padding: 28px 24px; border: 1px solid var(--ncm-line); border-radius: 10px;

line-height: 1.5; box-sizing: border-box; }

.ncm-form *, .ncm-form *::before, .ncm-form *::after { box-sizing: border-box; }

.ncm-form header { text-align: center; border-bottom: 2px solid var(--ncm-ink);

padding-bottom: 14px; margin-bottom: 22px; }

.ncm-form .ncm-org { font-weight: 700; font-size: 1.05rem; margin: 0; }

.ncm-form .ncm-addr { color: var(--ncm-muted); font-size: .9rem; margin: 2px 0 0; }

.ncm-form h2 { font-size: 1.35rem; letter-spacing: .04em; margin: 14px 0 0; }

.ncm-form fieldset { border: 0; padding: 0; margin: 0 0 24px; }

.ncm-form legend { font-weight: 700; font-size: 1rem; margin-bottom: 10px; padding: 0; }

.ncm-form .ncm-num { display:inline-block; min-width:1.6em; color: var(--ncm-accent); }

.ncm-form p.ncm-text { margin: 0 0 12px; }

.ncm-form .ncm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }

.ncm-form .ncm-full { grid-column: 1 / -1; }

.ncm-form label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }

.ncm-form .ncm-hint { font-weight: 400; color: var(--ncm-muted); font-size: .82rem; }

.ncm-form .ncm-req { color: var(--ncm-err); }

.ncm-form input[type=text], .ncm-form input[type=date], .ncm-form input[type=number],

.ncm-form textarea { width: 100%; padding: 9px 11px; font: inherit; font-size: .95rem;

color: var(--ncm-ink); background: #fff; border: 1px solid var(--ncm-line); border-radius: 6px; }

.ncm-form textarea { min-height: 72px; resize: vertical; }

.ncm-form input:focus, .ncm-form textarea:focus { outline: 2px solid var(--ncm-accent);

outline-offset: 1px; border-color: var(--ncm-accent); }

.ncm-form .ncm-money { position: relative; }

.ncm-form .ncm-money span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);

color: var(--ncm-muted); pointer-events: none; }

.ncm-form .ncm-money input { padding-left: 24px; }

.ncm-form .ncm-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;

background: var(--ncm-soft); border: 1px solid var(--ncm-line); border-radius: 6px;

margin-bottom: 8px; font-weight: 400; cursor: pointer; }

.ncm-form .ncm-choice input { margin-top: 4px; flex: none; width: 16px; height: 16px;

accent-color: var(--ncm-accent); }

.ncm-form #ncm-dispute-wrap { margin: 6px 0 0 28px; }

.ncm-form #ncm-dispute-wrap[hidden] { display: none; }

.ncm-form .ncm-sig { border: 1px dashed var(--ncm-muted); border-radius: 6px; background: #fff;

position: relative; }

.ncm-form .ncm-sig canvas { display: block; width: 100%; height: 150px; touch-action: none;

cursor: crosshair; }

.ncm-form .ncm-sig .ncm-sigline { position: absolute; left: 16px; right: 16px; bottom: 34px;

border-bottom: 1px solid var(--ncm-line); pointer-events: none; }

.ncm-form .ncm-sigbar { display:flex; justify-content: space-between; align-items:center;

margin-top: 6px; font-size: .82rem; color: var(--ncm-muted); }

.ncm-form button { font: inherit; cursor: pointer; border-radius: 6px; }

.ncm-form .ncm-clear { background: none; border: 1px solid var(--ncm-line); padding: 4px 10px;

font-size: .82rem; color: var(--ncm-ink); }

.ncm-form .ncm-submit { background: var(--ncm-accent); color: #fff; border: 0;

padding: 12px 26px; font-size: 1rem; font-weight: 600; }

.ncm-form .ncm-submit:hover { filter: brightness(1.1); }

.ncm-form .ncm-submit:disabled { opacity: .6; cursor: default; }

.ncm-form .ncm-error { color: var(--ncm-err); font-size: .85rem; margin-top: 4px; }

.ncm-form .ncm-error:empty { display: none; }

.ncm-form .ncm-msg { padding: 14px 16px; border-radius: 6px; margin-top: 16px; }

.ncm-form .ncm-msg.ok { background: #e7f4ec; color: #14532d; }

.ncm-form .ncm-msg.bad { background: #fdecea; color: var(--ncm-err); }

.ncm-form .ncm-msg:empty { display: none; }

@media (max-width: 560px) {

.ncm-form { padding: 20px 16px; border-radius: 0; border-left: 0; border-right: 0; }

.ncm-form .ncm-grid { grid-template-columns: 1fr; }

}

</style>

<p class="ncm-org">North Coast Ministries</p>

<p class="ncm-addr">321 West Wabash Ave, Eureka, CA 95501  ·  EIN 94-3206594</p>

<h2>FINAL PAYCHECK ACKNOWLEDGMENT</h2>

</header>

<legend>Employee & Paycheck Information</legend>

<label for="ncm-name">Employee Name <span class="ncm-req">*</span></label>

</div>

<label for="ncm-address">Employee Address <span class="ncm-req">*</span></label>

</div>

<div>

</div>

<div>

<label for="ncm-lastday">Last Day of Employment <span class="ncm-req">*</span></label>

</div>

<div>

<label for="ncm-paydate">Final Paycheck Date <span class="ncm-req">*</span></label>

</div>

<div>

<label for="ncm-checknum">Paycheck Number</label>

</div>

</fieldset>

<legend><span class="ncm-num">1.</span>Acknowledgment of Receipt</legend>

<p class="ncm-text">I, the undersigned, acknowledge that I received my final paycheck from North Coast Ministries on the date listed above for wages earned through my last day of employment, or on the date below if I did not pick it up the date it was prepared.</p>

<div>

<label for="ncm-received">Date received <span class="ncm-hint">(only if different from paycheck date)</span></label>

</div>

</fieldset>

<legend><span class="ncm-num">2.</span>Wage Details</legend>

<div>

<label for="ncm-gross">Gross wages <span class="ncm-req">*</span></label>

</div>

<div>

<label for="ncm-adj">Less deductions/withholdings and plus additions <span class="ncm-hint">(if any)</span></label>

</div>

<div>

<label for="ncm-net">Net pay received <span class="ncm-req">*</span></label>

</div>

<div>

<label for="ncm-check">Check amount <span class="ncm-hint">(if different)</span></label>

</div>

</fieldset>

<legend><span class="ncm-num">3.</span>Accuracy of Payment <span class="ncm-req">*</span> <span class="ncm-hint">(select one)</span></legend>

<span>I have reviewed the amounts and believe them to be accurate.</span></label>

<span>I have received the paycheck, but I have questions/disputes regarding the wage amounts.</span></label>

<label for="ncm-dispute">Please describe briefly <span class="ncm-req">*</span></label>

</div>

</fieldset>

<legend><span class="ncm-num">4.</span>No Other Claims</legend>

<span>I understand this signature confirms receipt of the final paycheck. This document is intended as proof of payment receipt. <span class="ncm-req">*</span></span></label>

</fieldset>

<legend><span class="ncm-num">5.</span>All Wages Paid Acknowledgment</legend>

<span>I acknowledge that I have received all wages and compensation due to me from North Coast Ministries through my last day of employment as listed above, subject to any items specifically identified in this document. <span class="ncm-req">*</span></span></label>

<label for="ncm-exceptions" style="margin-top:12px">Exceptions <span class="ncm-hint">(if any)</span></label>

</fieldset>

<legend>Signature</legend>

<div>

<label for="ncm-printed">Employee Printed Name <span class="ncm-req">*</span></label>

</div>

<div>

</div>

<label id="ncm-sig-label">Employee Signature <span class="ncm-req">*</span> <span class="ncm-hint">(sign with mouse or finger)</span></label>

</div>

<div class="ncm-sigbar"><span>Sign above the line</span>

<button type="button" class="ncm-clear" id="ncm-sig-clear">Clear</button></div>

</div>

<span>I agree that my electronic signature above is the legal equivalent of my handwritten signature on this document. <span class="ncm-req">*</span></span></label>

</div>

</fieldset>

<legend>W-2 Mailing Address</legend>

<span>Send my W-2 to the employee address listed above.</span></label>

<label for="ncm-w2">New Address to send W-2</label>

</div>

</fieldset>

<button type="submit" class="ncm-submit">Submit Acknowledgment</button>

</form>

(function () {

var form = document.getElementById('ncm-final-paycheck');

if (!form) return;

var $ = function (s) { return form.querySelector(s); };

// Default signature date to today (local time)

var d = new Date(), pad = function (n) { return (n < 10 ? '0' : '') + n; };

$('#ncm-sigdate').value = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());

// Copy employee name into printed name until the user edits it

var printed = $('#ncm-printed'), printedTouched = false;

printed.addEventListener('input', function () { printedTouched = true; });

$('#ncm-name').addEventListener('input', function (e) { if (!printedTouched) printed.value = e.target.value; });

// Show dispute box only when "questions/disputes" is selected

var disputeWrap = $('#ncm-dispute-wrap'), dispute = $('#ncm-dispute');

form.querySelectorAll('input[name=accuracy]').forEach(function (r) {

r.addEventListener('change', function () {

var on = r.checked && r.value !== 'Accurate';

disputeWrap.hidden = !on; dispute.required = on;

if (on) dispute.focus();

});

// W-2 "same as above" toggle

var w2same = $('#ncm-w2same'), w2wrap = $('#ncm-w2-wrap'), w2 = $('#ncm-w2');

w2same.addEventListener('change', function () {

w2wrap.style.display = w2same.checked ? 'none' : '';

if (w2same.checked) w2.value = '';

});

// Signature pad

var canvas = $('#ncm-sigpad'), ctx = canvas.getContext('2d'), drawing = false, hasInk = false, last = null;

function sizeCanvas() {

var ratio = Math.max(window.devicePixelRatio || 1, 1), rect = canvas.getBoundingClientRect();

var saved = hasInk ? canvas.toDataURL() : null;

canvas.width = rect.width * ratio; canvas.height = rect.height * ratio;

ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

ctx.lineWidth = 2.2; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#111';

if (saved) { var img = new Image(); img.onload = function () { ctx.drawImage(img, 0, 0, rect.width, rect.height); }; img.src = saved; }

}

function pos(e) { var r = canvas.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }

canvas.addEventListener('pointerdown', function (e) {

drawing = true; last = pos(e); canvas.setPointerCapture(e.pointerId);

ctx.beginPath(); ctx.arc(last.x, last.y, 1.1, 0, Math.PI * 2); ctx.fillStyle = '#111'; ctx.fill();

hasInk = true; setErr('signature', '');

});

canvas.addEventListener('pointermove', function (e) {

if (!drawing) return; var p = pos(e);

ctx.beginPath(); ctx.moveTo(last.x, last.y); ctx.lineTo(p.x, p.y); ctx.stroke(); last = p;

});

['pointerup', 'pointercancel', 'pointerleave'].forEach(function (ev) {

canvas.addEventListener(ev, function () { drawing = false; });

});

$('#ncm-sig-clear').addEventListener('click', function () {

ctx.clearRect(0, 0, canvas.width, canvas.height); hasInk = false; $('#ncm-sigdata').value = '';

});

window.addEventListener('resize', sizeCanvas);

sizeCanvas();

function setErr(key, msg) { var el = form.querySelector('.ncm-error[data-for="' + key + '"]'); if (el) el.textContent = msg; }

// Validation + submission

var msg = form.querySelector('.ncm-msg'), btn = form.querySelector('.ncm-submit');

form.addEventListener('submit', function (e) {

e.preventDefault();

msg.className = 'ncm-msg'; msg.textContent = '';

var ok = true;

if (!form.querySelector('input[name=accuracy]:checked')) { setErr('accuracy', 'Please select one option.'); ok = false; }

else setErr('accuracy', '');

if (!hasInk) { setErr('signature', 'Please sign in the box above.'); ok = false; }

if (!form.checkValidity() || !ok) {

form.reportValidity();

msg.className = 'ncm-msg bad'; msg.textContent = 'Please complete the required fields marked with *.';

return;

}

$('#ncm-sigdata').value = canvas.toDataURL('image/png');

btn.disabled = true; btn.textContent = 'Submitting…';

fetch(form.action, { method: 'POST', body: new FormData(form), headers: { 'Accept': 'application/json' } })

.then(function (res) {

if (!res.ok) throw new Error('Server responded ' + res.status);

form.querySelectorAll('fieldset, .ncm-submit').forEach(function (el) { el.style.display = 'none'; });

msg.className = 'ncm-msg ok';

msg.textContent = 'Thank you. Your Final Paycheck Acknowledgment has been submitted to North Coast Ministries.';

})

.catch(function () {

btn.disabled = false; btn.textContent = 'Submit Acknowledgment';

msg.className = 'ncm-msg bad';

msg.textContent = 'Sorry, the form could not be submitted. Please try again or contact the office.';

});

})();

</script>

</div>

Final Paycheck Acknowledgement