Reference Request | National Learning Group<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --font-primary: \"Poppins\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-secondary: \"Raleway\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-body: \"Nunito Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n\n --brand-blue: #2CAAE2;\n --brand-deep: #305261;\n --brand-light: #8ABFD9;\n --line: #cdd9e0;\n --surface: #ffffff;\n --page-bg: #f5f7fa;\n --ink: #101419;\n --danger: #8f2a34;\n --danger-bg: #fff4f6;\n --danger-border: #f2c6cc;\n --ok-bg: #eefaf6;\n --ok-border: #bde9d9;\n }\n\n * { box-sizing: border-box; }\n\n body {\n margin: 0;\n background:\n radial-gradient(1100px 440px at 8% -10%, #d9ecf8 0%, rgba(217, 236, 248, 0) 62%),\n radial-gradient(880px 480px at 98% 112%, #e7f4e9 0%, rgba(231, 244, 233, 0) 56%),\n linear-gradient(180deg, #f7fbfd 0%, #f2f7fb 100%);\n color: var(--brand-deep);\n font-family: var(--font-body);\n line-height: 1.5;\n padding: 24px 14px 40px;\n }\n\n .ref-shell {\n width: min(900px, 100%);\n margin: 0 auto;\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 16px;\n box-shadow: 0 16px 34px rgba(30, 63, 95, 0.12);\n overflow: hidden;\n }\n\n .ref-head {\n padding: 24px 22px;\n border-bottom: 1px solid var(--line);\n background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);\n }\n\n .ref-title {\n margin: 0;\n font-family: var(--font-primary);\n font-size: clamp(1.45rem, 3.3vw, 2rem);\n line-height: 1.1;\n color: var(--brand-deep);\n }\n\n .ref-intro {\n margin: 16px 0 0;\n font-family: var(--font-secondary);\n color: var(--brand-deep);\n }\n\n .ref-note {\n margin: 16px 0 0;\n border-left: 4px solid var(--brand-blue);\n padding: 10px 12px;\n background: #f1f9fd;\n border-radius: 8px;\n font-size: 0.96rem;\n }\n\n .ref-form {\n padding: 22px;\n display: grid;\n gap: 20px;\n }\n\n .grid-fields {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n }\n\n .field,\n .question {\n display: grid;\n gap: 8px;\n }\n\n .field label,\n .question legend {\n margin: 0;\n font-family: var(--font-primary);\n font-weight: 600;\n font-size: 0.96rem;\n color: var(--ink);\n }\n\n .help-text {\n margin: -2px 0 0;\n font-size: 0.86rem;\n color: var(--brand-deep);\n opacity: 0.85;\n }\n\n input[type=\"text\"],\n select,\n textarea {\n width: 100%;\n border: 1px solid var(--line);\n border-radius: 10px;\n padding: 11px 12px;\n font: inherit;\n color: var(--ink);\n background: #fff;\n transition: border-color 120ms ease, box-shadow 120ms ease;\n }\n\n input[type=\"text\"]:focus,\n select:focus,\n textarea:focus {\n outline: none;\n border-color: var(--brand-blue);\n box-shadow: 0 0 0 2px rgba(44, 170, 226, 0.18);\n }\n\n textarea {\n min-height: 104px;\n resize: vertical;\n }\n\n fieldset {\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 14px;\n margin: 0;\n }\n\n .yn {\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .yn label {\n font-family: var(--font-body);\n font-weight: 600;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n color: var(--brand-deep);\n }\n\n .details {\n margin-top: 10px;\n display: none;\n }\n\n .details.show {\n display: block;\n animation: reveal 180ms ease;\n }\n\n @keyframes reveal {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .required-note {\n margin: 0;\n font-size: 0.92rem;\n color: var(--brand-light);\n }\n\n .error-box,\n .success-box {\n border-radius: 10px;\n padding: 10px 12px;\n display: none;\n font-size: 0.95rem;\n }\n\n .error-box {\n border: 1px solid var(--danger-border);\n background: var(--danger-bg);\n color: var(--danger);\n }\n\n .success-box {\n border: 1px solid var(--ok-border);\n background: var(--ok-bg);\n color: #194f3a;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .submit-btn {\n appearance: none;\n border: 1px solid var(--brand-blue);\n background: var(--brand-blue);\n color: #fff;\n font-family: var(--font-primary);\n font-weight: 600;\n padding: 11px 18px;\n border-radius: 10px;\n cursor: pointer;\n transition: filter 120ms ease;\n }\n\n .submit-btn:hover { filter: brightness(0.95); }\n .submit-btn:disabled { opacity: 0.7; cursor: wait; }\n\n .thanks {\n display: none;\n padding: 22px;\n border-top: 1px solid var(--line);\n background: #fbfffd;\n font-family: var(--font-secondary);\n }\n\n .thanks h2 {\n margin: 0 0 10px;\n font-family: var(--font-primary);\n color: var(--brand-deep);\n font-size: 1.35rem;\n }\n\n .full { grid-column: 1 \/ -1; }\n\n .form-section {\n display: grid;\n gap: 14px;\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 18px 18px 20px;\n background: #fafcfe;\n }\n\n .section-heading {\n margin: 0;\n font-family: var(--font-primary);\n font-size: 1rem;\n font-weight: 700;\n color: var(--brand-deep);\n padding-bottom: 10px;\n border-bottom: 2px solid var(--brand-blue);\n letter-spacing: 0.01em;\n }\n\n .duration-row {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .duration-row input[type=\"number\"] {\n width: 80px;\n }\n\n @media (max-width: 760px) {\n .grid-fields { grid-template-columns: 1fr; }\n .ref-head,\n .ref-form,\n .thanks { padding: 18px; }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"ref-shell\" aria-labelledby=\"ref-title\">\n <header class=\"ref-head\">\n <h1 id=\"ref-title\" class=\"ref-title\">Reference Request<\/h1>\n <div class=\"ref-intro\">\n <p>An applicant has recently applied to join the National Learning Group and has provided your contact details as a reference.<\/p>\n <p>Could you kindly take a few moments to answer the following questions about the applicant?<\/p>\n <p>Your insights will greatly assist us in confirming their suitability to work in a regulated environment.<\/p>\n <\/div>\n <p class=\"ref-note\">Please note that this role is exempt from the Rehabilitation of Offenders Act 1974.<\/p>\n <\/header>\n\n <form id=\"reference-form\" class=\"ref-form\" novalidate>\n <p class=\"required-note\">All fields are required before submission.<\/p>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Reference Details<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field full\">\n <label for=\"uniqueId\">Unique ID<\/label>\n <p class=\"help-text\">This was included in the email requesting the reference.<\/p>\n <input id=\"uniqueId\" name=\"uniqueId\" type=\"text\" required>\n <\/div>\n <div class=\"field full\">\n <label for=\"referenceType\">What type of reference are you providing?<\/label>\n <select id=\"referenceType\" name=\"referenceType\" required>\n <option value=\"\" selected disabled>Select one<\/option>\n <option value=\"Employer\">Employer<\/option>\n <option value=\"Character\/Academic\">Character\/Academic<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Candidate Details<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field\">\n <label for=\"candidateName\">Candidate Name<\/label>\n <input id=\"candidateName\" name=\"candidateName\" type=\"text\" required>\n <\/div>\n <div class=\"field\" id=\"jobTitleField\" style=\"display:none\">\n <label for=\"jobTitleAtOrganisation\">Job Title at your Organisation<\/label>\n <input id=\"jobTitleAtOrganisation\" name=\"jobTitleAtOrganisation\" type=\"text\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Your Details<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field\">\n <label for=\"refereeName\">Referee Name<\/label>\n <input id=\"refereeName\" name=\"refereeName\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"refereeTitle\">Referee Job Title<\/label>\n <input id=\"refereeTitle\" name=\"refereeTitle\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"organisationName\">Organisation Name<\/label>\n <p class=\"help-text\">Put N\/A if not applicable.<\/p>\n <input id=\"organisationName\" name=\"organisationName\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"relationshipToTutor\">Relationship to Candidate<\/label>\n <input id=\"relationshipToTutor\" name=\"relationshipToTutor\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"refereeEmail\">Referee Email Address<\/label>\n <input id=\"refereeEmail\" name=\"refereeEmail\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"refereePhone\">Referee Phone Number<\/label>\n <input id=\"refereePhone\" name=\"refereePhone\" type=\"text\" required>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"employmentSection\" style=\"display:none\">\n <h2 class=\"section-heading\">Employment Period<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field\">\n <label for=\"employmentStartDate\">Start Date of Employment<\/label>\n <input id=\"employmentStartDate\" name=\"employmentStartDate\" type=\"date\">\n <\/div>\n <div class=\"field\" id=\"endDateField\">\n <label for=\"employmentEndDate\">End Date of Employment<\/label>\n <input id=\"employmentEndDate\" name=\"employmentEndDate\" type=\"date\">\n <\/div>\n <div class=\"field full\">\n <label><input type=\"checkbox\" id=\"stillCurrentlyEmployed\" name=\"stillCurrentlyEmployed\"> Still currently employed<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"durationSection\" style=\"display:none\">\n <h2 class=\"section-heading\">Length of Acquaintance<\/h2>\n <div class=\"field\">\n <label>How long have you known this person?<\/label>\n <div class=\"duration-row\">\n <input id=\"howLongKnownYears\" name=\"howLongKnownYears\" type=\"number\" min=\"0\" placeholder=\"0\">\n <span>years<\/span>\n <input id=\"howLongKnownMonths\" name=\"howLongKnownMonths\" type=\"number\" min=\"0\" max=\"11\" placeholder=\"0\">\n <span>months<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Suitability Questions<\/h2>\n\n <fieldset class=\"question\" data-question-id=\"q1\">\n <legend>Are you aware of any reason why the candidate named above is not suitable to work with young people or vulnerable adults?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q1Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q1Answer\" value=\"No\" required> No<\/label>\n <\/div>\n <div class=\"details\" id=\"q1DetailsWrap\">\n <label for=\"q1Details\">Please provide details.<\/label>\n <textarea id=\"q1Details\" name=\"q1Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q2\">\n <legend>Has the candidate ever been subject to any disciplinary procedures, whether completed or still in progress?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q2Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q2Answer\" value=\"No\" required> No<\/label>\n <label><input type=\"radio\" name=\"q2Answer\" value=\"Unable To Answer\" required> Unable To Answer<\/label>\n <\/div>\n <div class=\"details\" id=\"q2DetailsWrap\">\n <label for=\"q2Details\">Please provide details.<\/label>\n <textarea id=\"q2Details\" name=\"q2Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q3\">\n <legend>Has the candidate ever been subject to any safeguarding investigations, whether completed or still in progress?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q3Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q3Answer\" value=\"No\" required> No<\/label>\n <label><input type=\"radio\" name=\"q3Answer\" value=\"Unable To Answer\" required> Unable To Answer<\/label>\n <\/div>\n <div class=\"details\" id=\"q3DetailsWrap\">\n <label for=\"q3Details\">Please provide details.<\/label>\n <textarea id=\"q3Details\" name=\"q3Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q4\">\n <legend>To your knowledge, has the candidate ever been dismissed from a position working with young people or vulnerable adults?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q4Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q4Answer\" value=\"No\" required> No<\/label>\n <\/div>\n <div class=\"details\" id=\"q4DetailsWrap\">\n <label for=\"q4Details\">Please provide details.<\/label>\n <textarea id=\"q4Details\" name=\"q4Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q5\">\n <legend>Would you like to add anything else in relation to this candidate?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q5Answer\" value=\"Yes\"> Yes<\/label>\n <label><input type=\"radio\" name=\"q5Answer\" value=\"No\"> No<\/label>\n <\/div>\n <div class=\"details\" id=\"q5DetailsWrap\">\n <label for=\"q5Details\">Please provide details.<\/label>\n <textarea id=\"q5Details\" name=\"q5Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Declaration<\/h2>\n <div class=\"field\">\n <p style=\"margin:0 0 14px\">As a referee, I acknowledge and understand that National Learning Group is committed to safeguarding and promoting the welfare of children, young people, and vulnerable adults. I therefore confirm that the details provided in this reference are accurate to the best of my knowledge and I am appropriately placed to provide this information.<\/p>\n <p style=\"margin:0 0 14px\">I confirm that I am the intended recipient of this reference request and that I have personally completed this form.<\/p>\n <p style=\"margin:0 0 14px\">I understand that this role is exempt from the provisions of the Rehabilitation of Offenders Act 1974 and that, therefore, referees should provide all details they feel are relevant to a role in regulated activity.<\/p>\n <p style=\"margin:0 0 18px\">Should you have any concerns about your suitability to complete this reference, please get in touch before returning this form.<\/p>\n <label>\n <input id=\"confirmDeclaration\" name=\"confirmDeclaration\" type=\"checkbox\" required>\n I confirm the above declaration.\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"error-box\" id=\"formError\" role=\"alert\"><\/div>\n <div class=\"success-box\" id=\"formSuccess\" role=\"status\"><\/div>\n\n <div class=\"actions\">\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">Submit Reference<\/button>\n <\/div>\n <\/form>\n\n <section class=\"thanks\" id=\"thanksMessage\" aria-live=\"polite\">\n <h2>Thank you<\/h2>\n <p>Your cooperation and time in providing this feedback are highly appreciated.<\/p>\n <p>Thank you once again for your assistance and support.<br>Recruitment Team @ NLG<\/p>\n <\/section>\n <\/section>\n\n <script>\n (function () {\n const form = document.getElementById(\"reference-form\");\n const errorBox = document.getElementById(\"formError\");\n const successBox = document.getElementById(\"formSuccess\");\n const thanks = document.getElementById(\"thanksMessage\");\n const submitBtn = document.getElementById(\"submitBtn\");\n\n const conditionalFields = [\n { name: \"q1Answer\", detailsId: \"q1Details\", wrapId: \"q1DetailsWrap\" },\n { name: \"q2Answer\", detailsId: \"q2Details\", wrapId: \"q2DetailsWrap\" },\n { name: \"q3Answer\", detailsId: \"q3Details\", wrapId: \"q3DetailsWrap\" },\n { name: \"q4Answer\", detailsId: \"q4Details\", wrapId: \"q4DetailsWrap\" },\n { name: \"q5Answer\", detailsId: \"q5Details\", wrapId: \"q5DetailsWrap\" }\n ];\n\n function selectedValue(name) {\n const checked = form.querySelector(`input[name=\"${name}\"]:checked`);\n return checked ? checked.value : \"\";\n }\n\n function updateReferenceTypeUI() {\n const type = document.getElementById(\"referenceType\").value;\n const isEmployer = type === \"Employer\";\n const isCharacter = type === \"Character\/Academic\";\n\n const jobTitleField = document.getElementById(\"jobTitleField\");\n const jobTitleInput = document.getElementById(\"jobTitleAtOrganisation\");\n jobTitleField.style.display = isEmployer ? \"\" : \"none\";\n jobTitleInput.required = isEmployer;\n if (!isEmployer) { jobTitleInput.value = \"\"; }\n\n const employmentSection = document.getElementById(\"employmentSection\");\n const durationSection = document.getElementById(\"durationSection\");\n employmentSection.style.display = isEmployer ? \"\" : \"none\";\n durationSection.style.display = isCharacter ? \"\" : \"none\";\n\n const startDate = document.getElementById(\"employmentStartDate\");\n const yearsInput = document.getElementById(\"howLongKnownYears\");\n const monthsInput = document.getElementById(\"howLongKnownMonths\");\n startDate.required = isEmployer;\n yearsInput.required = isCharacter;\n monthsInput.required = isCharacter;\n if (!isEmployer) { startDate.value = \"\"; }\n if (!isCharacter) { yearsInput.value = \"\"; monthsInput.value = \"\"; }\n\n updateStillEmployed();\n }\n\n function updateStillEmployed() {\n const type = document.getElementById(\"referenceType\").value;\n const stillEmployed = document.getElementById(\"stillCurrentlyEmployed\").checked;\n const endDateField = document.getElementById(\"endDateField\");\n const endDateInput = document.getElementById(\"employmentEndDate\");\n if (type === \"Employer\") {\n endDateField.style.display = stillEmployed ? \"none\" : \"\";\n endDateInput.required = !stillEmployed;\n if (stillEmployed) { endDateInput.value = \"\"; }\n } else {\n endDateField.style.display = \"none\";\n endDateInput.required = false;\n }\n }\n\n function updateConditionalUI() {\n conditionalFields.forEach((item) => {\n const value = selectedValue(item.name);\n const wrap = document.getElementById(item.wrapId);\n const details = document.getElementById(item.detailsId);\n if (value === \"Yes\") {\n wrap.classList.add(\"show\");\n details.required = true;\n } else {\n wrap.classList.remove(\"show\");\n details.required = false;\n details.value = \"\";\n }\n });\n }\n\n function buildPayload() {\n const data = new FormData(form);\n const type = data.get(\"referenceType\");\n return {\n uniqueId: data.get(\"uniqueId\"),\n referenceType: type,\n candidateName: data.get(\"candidateName\"),\n jobTitleAtOrganisation: type === \"Employer\" ? (data.get(\"jobTitleAtOrganisation\") || \"\") : \"\",\n organisationName: data.get(\"organisationName\"),\n refereeName: data.get(\"refereeName\"),\n refereeTitle: data.get(\"refereeTitle\"),\n relationshipToTutor: data.get(\"relationshipToTutor\"),\n refereeEmail: data.get(\"refereeEmail\"),\n refereePhone: data.get(\"refereePhone\"),\n employmentStartDate: type === \"Employer\" ? (data.get(\"employmentStartDate\") || \"\") : \"\",\n employmentEndDate: type === \"Employer\" ? (data.get(\"employmentEndDate\") || \"\") : \"\",\n stillCurrentlyEmployed: data.get(\"stillCurrentlyEmployed\") ? \"Yes\" : \"No\",\n howLongKnownYears: type === \"Character\/Academic\" ? (data.get(\"howLongKnownYears\") || \"\") : \"\",\n howLongKnownMonths: type === \"Character\/Academic\" ? (data.get(\"howLongKnownMonths\") || \"\") : \"\",\n q1Answer: data.get(\"q1Answer\"),\n q1Details: data.get(\"q1Details\") || \"\",\n q2Answer: data.get(\"q2Answer\"),\n q2Details: data.get(\"q2Details\") || \"\",\n q3Answer: data.get(\"q3Answer\"),\n q3Details: data.get(\"q3Details\") || \"\",\n q4Answer: data.get(\"q4Answer\"),\n q4Details: data.get(\"q4Details\") || \"\",\n q5Answer: data.get(\"q5Answer\") || \"\",\n q5Details: data.get(\"q5Details\") || \"\",\n confirmDeclaration: data.get(\"confirmDeclaration\") ? \"Yes\" : \"No\",\n submittedAt: new Date().toISOString()\n };\n }\n\n async function submitToEndpoint(payload) {\n const endpoint = window.REFERENCE_REQUEST_ENDPOINT || \"\/lms\/wp-json\/nlg-reference-request\/v1\/submissions\";\n if (!endpoint) {\n return { ok: true, message: \"Reference captured locally. Configure endpoint for live processing.\" };\n }\n\n const response = await fetch(endpoint, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify(payload)\n });\n\n let result = {};\n\n try {\n result = await response.json();\n } catch (error) {\n result = {};\n }\n\n if (!response.ok) {\n throw new Error(result.message || result.error || \"Unable to submit the form at this time.\");\n }\n\n return result;\n }\n\n document.getElementById(\"referenceType\").addEventListener(\"change\", updateReferenceTypeUI);\n document.getElementById(\"stillCurrentlyEmployed\").addEventListener(\"change\", updateStillEmployed);\n form.addEventListener(\"change\", updateConditionalUI);\n updateReferenceTypeUI();\n updateConditionalUI();\n\n form.addEventListener(\"submit\", async function (event) {\n event.preventDefault();\n errorBox.style.display = \"none\";\n successBox.style.display = \"none\";\n\n updateReferenceTypeUI();\n updateConditionalUI();\n\n if (!form.checkValidity()) {\n errorBox.textContent = \"Please complete every required field before submitting.\";\n errorBox.style.display = \"block\";\n form.reportValidity();\n return;\n }\n\n submitBtn.disabled = true;\n\n try {\n const payload = buildPayload();\n const result = await submitToEndpoint(payload);\n successBox.textContent = result.message;\n successBox.style.display = \"block\";\n form.style.display = \"none\";\n thanks.style.display = \"block\";\n } catch (err) {\n errorBox.textContent = err.message || \"Submission failed. Please try again.\";\n errorBox.style.display = \"block\";\n } finally {\n submitBtn.disabled = false;\n }\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Reference Request | National Learning Group Reference Request An applicant has recently applied to join the National Learning Group and has provided your contact details as a reference. Could you kindly take a few moments to answer the following questions about the applicant? Your insights will greatly assist us in confirming their suitability to work…<\/p>\n","protected":false},"author":779,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-8456","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages\/8456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/users\/779"}],"replies":[{"embeddable":true,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/comments?post=8456"}],"version-history":[{"count":3,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages\/8456\/revisions"}],"predecessor-version":[{"id":8461,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages\/8456\/revisions\/8461"}],"wp:attachment":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/media?parent=8456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8456,"date":"2026-07-26T18:59:14","date_gmt":"2026-07-26T18:59:14","guid":{"rendered":"https:\/\/nationallearninggroup.co.uk\/lms\/?page_id=8456"},"modified":"2026-07-26T19:43:45","modified_gmt":"2026-07-26T19:43:45","slug":"reference-request-2","status":"publish","type":"page","link":"https:\/\/nationallearninggroup.co.uk\/lms\/reference-request-2\/","title":{"rendered":"Reference Request"},"content":{"rendered":"\n\n\n\n \n \n Reference Request | National Learning Group<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --font-primary: \"Poppins\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-secondary: \"Raleway\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --font-body: \"Nunito Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n\n --brand-blue: #2CAAE2;\n --brand-deep: #305261;\n --brand-light: #8ABFD9;\n --line: #cdd9e0;\n --surface: #ffffff;\n --page-bg: #f5f7fa;\n --ink: #101419;\n --danger: #8f2a34;\n --danger-bg: #fff4f6;\n --danger-border: #f2c6cc;\n --ok-bg: #eefaf6;\n --ok-border: #bde9d9;\n }\n\n * { box-sizing: border-box; }\n\n body {\n margin: 0;\n background:\n radial-gradient(1100px 440px at 8% -10%, #d9ecf8 0%, rgba(217, 236, 248, 0) 62%),\n radial-gradient(880px 480px at 98% 112%, #e7f4e9 0%, rgba(231, 244, 233, 0) 56%),\n linear-gradient(180deg, #f7fbfd 0%, #f2f7fb 100%);\n color: var(--brand-deep);\n font-family: var(--font-body);\n line-height: 1.5;\n padding: 24px 14px 40px;\n }\n\n .ref-shell {\n width: min(900px, 100%);\n margin: 0 auto;\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 16px;\n box-shadow: 0 16px 34px rgba(30, 63, 95, 0.12);\n overflow: hidden;\n }\n\n .ref-head {\n padding: 24px 22px;\n border-bottom: 1px solid var(--line);\n background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);\n }\n\n .ref-title {\n margin: 0;\n font-family: var(--font-primary);\n font-size: clamp(1.45rem, 3.3vw, 2rem);\n line-height: 1.1;\n color: var(--brand-deep);\n }\n\n .ref-intro {\n margin: 16px 0 0;\n font-family: var(--font-secondary);\n color: var(--brand-deep);\n }\n\n .ref-note {\n margin: 16px 0 0;\n border-left: 4px solid var(--brand-blue);\n padding: 10px 12px;\n background: #f1f9fd;\n border-radius: 8px;\n font-size: 0.96rem;\n }\n\n .ref-form {\n padding: 22px;\n display: grid;\n gap: 20px;\n }\n\n .grid-fields {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n }\n\n .field,\n .question {\n display: grid;\n gap: 8px;\n }\n\n .field label,\n .question legend {\n margin: 0;\n font-family: var(--font-primary);\n font-weight: 600;\n font-size: 0.96rem;\n color: var(--ink);\n }\n\n .help-text {\n margin: -2px 0 0;\n font-size: 0.86rem;\n color: var(--brand-deep);\n opacity: 0.85;\n }\n\n input[type=\"text\"],\n select,\n textarea {\n width: 100%;\n border: 1px solid var(--line);\n border-radius: 10px;\n padding: 11px 12px;\n font: inherit;\n color: var(--ink);\n background: #fff;\n transition: border-color 120ms ease, box-shadow 120ms ease;\n }\n\n input[type=\"text\"]:focus,\n select:focus,\n textarea:focus {\n outline: none;\n border-color: var(--brand-blue);\n box-shadow: 0 0 0 2px rgba(44, 170, 226, 0.18);\n }\n\n textarea {\n min-height: 104px;\n resize: vertical;\n }\n\n fieldset {\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 14px;\n margin: 0;\n }\n\n .yn {\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .yn label {\n font-family: var(--font-body);\n font-weight: 600;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n color: var(--brand-deep);\n }\n\n .details {\n margin-top: 10px;\n display: none;\n }\n\n .details.show {\n display: block;\n animation: reveal 180ms ease;\n }\n\n @keyframes reveal {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .required-note {\n margin: 0;\n font-size: 0.92rem;\n color: var(--brand-light);\n }\n\n .error-box,\n .success-box {\n border-radius: 10px;\n padding: 10px 12px;\n display: none;\n font-size: 0.95rem;\n }\n\n .error-box {\n border: 1px solid var(--danger-border);\n background: var(--danger-bg);\n color: var(--danger);\n }\n\n .success-box {\n border: 1px solid var(--ok-border);\n background: var(--ok-bg);\n color: #194f3a;\n }\n\n .actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .submit-btn {\n appearance: none;\n border: 1px solid var(--brand-blue);\n background: var(--brand-blue);\n color: #fff;\n font-family: var(--font-primary);\n font-weight: 600;\n padding: 11px 18px;\n border-radius: 10px;\n cursor: pointer;\n transition: filter 120ms ease;\n }\n\n .submit-btn:hover { filter: brightness(0.95); }\n .submit-btn:disabled { opacity: 0.7; cursor: wait; }\n\n .thanks {\n display: none;\n padding: 22px;\n border-top: 1px solid var(--line);\n background: #fbfffd;\n font-family: var(--font-secondary);\n }\n\n .thanks h2 {\n margin: 0 0 10px;\n font-family: var(--font-primary);\n color: var(--brand-deep);\n font-size: 1.35rem;\n }\n\n .full { grid-column: 1 \/ -1; }\n\n .form-section {\n display: grid;\n gap: 14px;\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 18px 18px 20px;\n background: #fafcfe;\n }\n\n .section-heading {\n margin: 0;\n font-family: var(--font-primary);\n font-size: 1rem;\n font-weight: 700;\n color: var(--brand-deep);\n padding-bottom: 10px;\n border-bottom: 2px solid var(--brand-blue);\n letter-spacing: 0.01em;\n }\n\n .duration-row {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .duration-row input[type=\"number\"] {\n width: 80px;\n }\n\n @media (max-width: 760px) {\n .grid-fields { grid-template-columns: 1fr; }\n .ref-head,\n .ref-form,\n .thanks { padding: 18px; }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"ref-shell\" aria-labelledby=\"ref-title\">\n <header class=\"ref-head\">\n <h1 id=\"ref-title\" class=\"ref-title\">Reference Request<\/h1>\n <div class=\"ref-intro\">\n <p>An applicant has recently applied to join the National Learning Group and has provided your contact details as a reference.<\/p>\n <p>Could you kindly take a few moments to answer the following questions about the applicant?<\/p>\n <p>Your insights will greatly assist us in confirming their suitability to work in a regulated environment.<\/p>\n <\/div>\n <p class=\"ref-note\">Please note that this role is exempt from the Rehabilitation of Offenders Act 1974.<\/p>\n <\/header>\n\n <form id=\"reference-form\" class=\"ref-form\" novalidate>\n <p class=\"required-note\">All fields are required before submission.<\/p>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Reference Details<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field full\">\n <label for=\"uniqueId\">Unique ID<\/label>\n <p class=\"help-text\">This was included in the email requesting the reference.<\/p>\n <input id=\"uniqueId\" name=\"uniqueId\" type=\"text\" required>\n <\/div>\n <div class=\"field full\">\n <label for=\"referenceType\">What type of reference are you providing?<\/label>\n <select id=\"referenceType\" name=\"referenceType\" required>\n <option value=\"\" selected disabled>Select one<\/option>\n <option value=\"Employer\">Employer<\/option>\n <option value=\"Character\/Academic\">Character\/Academic<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Candidate Details<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field\">\n <label for=\"candidateName\">Candidate Name<\/label>\n <input id=\"candidateName\" name=\"candidateName\" type=\"text\" required>\n <\/div>\n <div class=\"field\" id=\"jobTitleField\" style=\"display:none\">\n <label for=\"jobTitleAtOrganisation\">Job Title at your Organisation<\/label>\n <input id=\"jobTitleAtOrganisation\" name=\"jobTitleAtOrganisation\" type=\"text\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Your Details<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field\">\n <label for=\"refereeName\">Referee Name<\/label>\n <input id=\"refereeName\" name=\"refereeName\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"refereeTitle\">Referee Job Title<\/label>\n <input id=\"refereeTitle\" name=\"refereeTitle\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"organisationName\">Organisation Name<\/label>\n <p class=\"help-text\">Put N\/A if not applicable.<\/p>\n <input id=\"organisationName\" name=\"organisationName\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"relationshipToTutor\">Relationship to Candidate<\/label>\n <input id=\"relationshipToTutor\" name=\"relationshipToTutor\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"refereeEmail\">Referee Email Address<\/label>\n <input id=\"refereeEmail\" name=\"refereeEmail\" type=\"text\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"refereePhone\">Referee Phone Number<\/label>\n <input id=\"refereePhone\" name=\"refereePhone\" type=\"text\" required>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"employmentSection\" style=\"display:none\">\n <h2 class=\"section-heading\">Employment Period<\/h2>\n <div class=\"grid-fields\">\n <div class=\"field\">\n <label for=\"employmentStartDate\">Start Date of Employment<\/label>\n <input id=\"employmentStartDate\" name=\"employmentStartDate\" type=\"date\">\n <\/div>\n <div class=\"field\" id=\"endDateField\">\n <label for=\"employmentEndDate\">End Date of Employment<\/label>\n <input id=\"employmentEndDate\" name=\"employmentEndDate\" type=\"date\">\n <\/div>\n <div class=\"field full\">\n <label><input type=\"checkbox\" id=\"stillCurrentlyEmployed\" name=\"stillCurrentlyEmployed\"> Still currently employed<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"durationSection\" style=\"display:none\">\n <h2 class=\"section-heading\">Length of Acquaintance<\/h2>\n <div class=\"field\">\n <label>How long have you known this person?<\/label>\n <div class=\"duration-row\">\n <input id=\"howLongKnownYears\" name=\"howLongKnownYears\" type=\"number\" min=\"0\" placeholder=\"0\">\n <span>years<\/span>\n <input id=\"howLongKnownMonths\" name=\"howLongKnownMonths\" type=\"number\" min=\"0\" max=\"11\" placeholder=\"0\">\n <span>months<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Suitability Questions<\/h2>\n\n <fieldset class=\"question\" data-question-id=\"q1\">\n <legend>Are you aware of any reason why the candidate named above is not suitable to work with young people or vulnerable adults?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q1Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q1Answer\" value=\"No\" required> No<\/label>\n <\/div>\n <div class=\"details\" id=\"q1DetailsWrap\">\n <label for=\"q1Details\">Please provide details.<\/label>\n <textarea id=\"q1Details\" name=\"q1Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q2\">\n <legend>Has the candidate ever been subject to any disciplinary procedures, whether completed or still in progress?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q2Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q2Answer\" value=\"No\" required> No<\/label>\n <label><input type=\"radio\" name=\"q2Answer\" value=\"Unable To Answer\" required> Unable To Answer<\/label>\n <\/div>\n <div class=\"details\" id=\"q2DetailsWrap\">\n <label for=\"q2Details\">Please provide details.<\/label>\n <textarea id=\"q2Details\" name=\"q2Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q3\">\n <legend>Has the candidate ever been subject to any safeguarding investigations, whether completed or still in progress?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q3Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q3Answer\" value=\"No\" required> No<\/label>\n <label><input type=\"radio\" name=\"q3Answer\" value=\"Unable To Answer\" required> Unable To Answer<\/label>\n <\/div>\n <div class=\"details\" id=\"q3DetailsWrap\">\n <label for=\"q3Details\">Please provide details.<\/label>\n <textarea id=\"q3Details\" name=\"q3Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q4\">\n <legend>To your knowledge, has the candidate ever been dismissed from a position working with young people or vulnerable adults?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q4Answer\" value=\"Yes\" required> Yes<\/label>\n <label><input type=\"radio\" name=\"q4Answer\" value=\"No\" required> No<\/label>\n <\/div>\n <div class=\"details\" id=\"q4DetailsWrap\">\n <label for=\"q4Details\">Please provide details.<\/label>\n <textarea id=\"q4Details\" name=\"q4Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <fieldset class=\"question\" data-question-id=\"q5\">\n <legend>Would you like to add anything else in relation to this candidate?<\/legend>\n <div class=\"yn\">\n <label><input type=\"radio\" name=\"q5Answer\" value=\"Yes\"> Yes<\/label>\n <label><input type=\"radio\" name=\"q5Answer\" value=\"No\"> No<\/label>\n <\/div>\n <div class=\"details\" id=\"q5DetailsWrap\">\n <label for=\"q5Details\">Please provide details.<\/label>\n <textarea id=\"q5Details\" name=\"q5Details\"><\/textarea>\n <\/div>\n <\/fieldset>\n\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-heading\">Declaration<\/h2>\n <div class=\"field\">\n <p style=\"margin:0 0 14px\">As a referee, I acknowledge and understand that National Learning Group is committed to safeguarding and promoting the welfare of children, young people, and vulnerable adults. I therefore confirm that the details provided in this reference are accurate to the best of my knowledge and I am appropriately placed to provide this information.<\/p>\n <p style=\"margin:0 0 14px\">I confirm that I am the intended recipient of this reference request and that I have personally completed this form.<\/p>\n <p style=\"margin:0 0 14px\">I understand that this role is exempt from the provisions of the Rehabilitation of Offenders Act 1974 and that, therefore, referees should provide all details they feel are relevant to a role in regulated activity.<\/p>\n <p style=\"margin:0 0 18px\">Should you have any concerns about your suitability to complete this reference, please get in touch before returning this form.<\/p>\n <label>\n <input id=\"confirmDeclaration\" name=\"confirmDeclaration\" type=\"checkbox\" required>\n I confirm the above declaration.\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"error-box\" id=\"formError\" role=\"alert\"><\/div>\n <div class=\"success-box\" id=\"formSuccess\" role=\"status\"><\/div>\n\n <div class=\"actions\">\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">Submit Reference<\/button>\n <\/div>\n <\/form>\n\n <section class=\"thanks\" id=\"thanksMessage\" aria-live=\"polite\">\n <h2>Thank you<\/h2>\n <p>Your cooperation and time in providing this feedback are highly appreciated.<\/p>\n <p>Thank you once again for your assistance and support.<br>Recruitment Team @ NLG<\/p>\n <\/section>\n <\/section>\n\n <script>\n (function () {\n const form = document.getElementById(\"reference-form\");\n const errorBox = document.getElementById(\"formError\");\n const successBox = document.getElementById(\"formSuccess\");\n const thanks = document.getElementById(\"thanksMessage\");\n const submitBtn = document.getElementById(\"submitBtn\");\n\n const conditionalFields = [\n { name: \"q1Answer\", detailsId: \"q1Details\", wrapId: \"q1DetailsWrap\" },\n { name: \"q2Answer\", detailsId: \"q2Details\", wrapId: \"q2DetailsWrap\" },\n { name: \"q3Answer\", detailsId: \"q3Details\", wrapId: \"q3DetailsWrap\" },\n { name: \"q4Answer\", detailsId: \"q4Details\", wrapId: \"q4DetailsWrap\" },\n { name: \"q5Answer\", detailsId: \"q5Details\", wrapId: \"q5DetailsWrap\" }\n ];\n\n function selectedValue(name) {\n const checked = form.querySelector(`input[name=\"${name}\"]:checked`);\n return checked ? checked.value : \"\";\n }\n\n function updateReferenceTypeUI() {\n const type = document.getElementById(\"referenceType\").value;\n const isEmployer = type === \"Employer\";\n const isCharacter = type === \"Character\/Academic\";\n\n const jobTitleField = document.getElementById(\"jobTitleField\");\n const jobTitleInput = document.getElementById(\"jobTitleAtOrganisation\");\n jobTitleField.style.display = isEmployer ? \"\" : \"none\";\n jobTitleInput.required = isEmployer;\n if (!isEmployer) { jobTitleInput.value = \"\"; }\n\n const employmentSection = document.getElementById(\"employmentSection\");\n const durationSection = document.getElementById(\"durationSection\");\n employmentSection.style.display = isEmployer ? \"\" : \"none\";\n durationSection.style.display = isCharacter ? \"\" : \"none\";\n\n const startDate = document.getElementById(\"employmentStartDate\");\n const yearsInput = document.getElementById(\"howLongKnownYears\");\n const monthsInput = document.getElementById(\"howLongKnownMonths\");\n startDate.required = isEmployer;\n yearsInput.required = isCharacter;\n monthsInput.required = isCharacter;\n if (!isEmployer) { startDate.value = \"\"; }\n if (!isCharacter) { yearsInput.value = \"\"; monthsInput.value = \"\"; }\n\n updateStillEmployed();\n }\n\n function updateStillEmployed() {\n const type = document.getElementById(\"referenceType\").value;\n const stillEmployed = document.getElementById(\"stillCurrentlyEmployed\").checked;\n const endDateField = document.getElementById(\"endDateField\");\n const endDateInput = document.getElementById(\"employmentEndDate\");\n if (type === \"Employer\") {\n endDateField.style.display = stillEmployed ? \"none\" : \"\";\n endDateInput.required = !stillEmployed;\n if (stillEmployed) { endDateInput.value = \"\"; }\n } else {\n endDateField.style.display = \"none\";\n endDateInput.required = false;\n }\n }\n\n function updateConditionalUI() {\n conditionalFields.forEach((item) => {\n const value = selectedValue(item.name);\n const wrap = document.getElementById(item.wrapId);\n const details = document.getElementById(item.detailsId);\n if (value === \"Yes\") {\n wrap.classList.add(\"show\");\n details.required = true;\n } else {\n wrap.classList.remove(\"show\");\n details.required = false;\n details.value = \"\";\n }\n });\n }\n\n function buildPayload() {\n const data = new FormData(form);\n const type = data.get(\"referenceType\");\n return {\n uniqueId: data.get(\"uniqueId\"),\n referenceType: type,\n candidateName: data.get(\"candidateName\"),\n jobTitleAtOrganisation: type === \"Employer\" ? (data.get(\"jobTitleAtOrganisation\") || \"\") : \"\",\n organisationName: data.get(\"organisationName\"),\n refereeName: data.get(\"refereeName\"),\n refereeTitle: data.get(\"refereeTitle\"),\n relationshipToTutor: data.get(\"relationshipToTutor\"),\n refereeEmail: data.get(\"refereeEmail\"),\n refereePhone: data.get(\"refereePhone\"),\n employmentStartDate: type === \"Employer\" ? (data.get(\"employmentStartDate\") || \"\") : \"\",\n employmentEndDate: type === \"Employer\" ? (data.get(\"employmentEndDate\") || \"\") : \"\",\n stillCurrentlyEmployed: data.get(\"stillCurrentlyEmployed\") ? \"Yes\" : \"No\",\n howLongKnownYears: type === \"Character\/Academic\" ? (data.get(\"howLongKnownYears\") || \"\") : \"\",\n howLongKnownMonths: type === \"Character\/Academic\" ? (data.get(\"howLongKnownMonths\") || \"\") : \"\",\n q1Answer: data.get(\"q1Answer\"),\n q1Details: data.get(\"q1Details\") || \"\",\n q2Answer: data.get(\"q2Answer\"),\n q2Details: data.get(\"q2Details\") || \"\",\n q3Answer: data.get(\"q3Answer\"),\n q3Details: data.get(\"q3Details\") || \"\",\n q4Answer: data.get(\"q4Answer\"),\n q4Details: data.get(\"q4Details\") || \"\",\n q5Answer: data.get(\"q5Answer\") || \"\",\n q5Details: data.get(\"q5Details\") || \"\",\n confirmDeclaration: data.get(\"confirmDeclaration\") ? \"Yes\" : \"No\",\n submittedAt: new Date().toISOString()\n };\n }\n\n async function submitToEndpoint(payload) {\n const endpoint = window.REFERENCE_REQUEST_ENDPOINT || \"\/lms\/wp-json\/nlg-reference-request\/v1\/submissions\";\n if (!endpoint) {\n return { ok: true, message: \"Reference captured locally. Configure endpoint for live processing.\" };\n }\n\n const response = await fetch(endpoint, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify(payload)\n });\n\n let result = {};\n\n try {\n result = await response.json();\n } catch (error) {\n result = {};\n }\n\n if (!response.ok) {\n throw new Error(result.message || result.error || \"Unable to submit the form at this time.\");\n }\n\n return result;\n }\n\n document.getElementById(\"referenceType\").addEventListener(\"change\", updateReferenceTypeUI);\n document.getElementById(\"stillCurrentlyEmployed\").addEventListener(\"change\", updateStillEmployed);\n form.addEventListener(\"change\", updateConditionalUI);\n updateReferenceTypeUI();\n updateConditionalUI();\n\n form.addEventListener(\"submit\", async function (event) {\n event.preventDefault();\n errorBox.style.display = \"none\";\n successBox.style.display = \"none\";\n\n updateReferenceTypeUI();\n updateConditionalUI();\n\n if (!form.checkValidity()) {\n errorBox.textContent = \"Please complete every required field before submitting.\";\n errorBox.style.display = \"block\";\n form.reportValidity();\n return;\n }\n\n submitBtn.disabled = true;\n\n try {\n const payload = buildPayload();\n const result = await submitToEndpoint(payload);\n successBox.textContent = result.message;\n successBox.style.display = \"block\";\n form.style.display = \"none\";\n thanks.style.display = \"block\";\n } catch (err) {\n errorBox.textContent = err.message || \"Submission failed. Please try again.\";\n errorBox.style.display = \"block\";\n } finally {\n submitBtn.disabled = false;\n }\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Reference Request | National Learning Group Reference Request An applicant has recently applied to join the National Learning Group and has provided your contact details as a reference. Could you kindly take a few moments to answer the following questions about the applicant? Your insights will greatly assist us in confirming their suitability to work…<\/p>\n","protected":false},"author":779,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-8456","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages\/8456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/users\/779"}],"replies":[{"embeddable":true,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/comments?post=8456"}],"version-history":[{"count":3,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages\/8456\/revisions"}],"predecessor-version":[{"id":8461,"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/pages\/8456\/revisions\/8461"}],"wp:attachment":[{"href":"https:\/\/nationallearninggroup.co.uk\/lms\/wp-json\/wp\/v2\/media?parent=8456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}