--- title: Background Check Consent Form product: PDF Generator description: Download a printable background check consent form in PDF. Generate editable or prefilled employee consent forms from JSON using SurveyJS PDF Generator. framework: Vanilla JS source: https://surveyjs.io/pdf-generator/examples/pdf-hr-background-check-consent-form-template/vanillajs index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Background Check Consent Form (Vanilla JS) ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import { Model } from "survey-core"; import "survey-js-ui"; import { SurveyPDF } from "survey-pdf"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function createSurveyPdfModel (surveyModel) { const surveyPDF = new SurveyPDF(json); if (surveyModel) { surveyPDF.data = surveyModel.data; surveyPDF.locale = surveyModel.locale; } surveyPDF.questionsOnPageMode = "standard"; return surveyPDF; } function saveSurveyToPdf (filename, surveyModel) { const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.save(filename); } const previewDiv = document.getElementById("pdf-preview"); const previewEmbed = document.getElementById("pdf-preview-frame"); let pdfBlobUrl; function showPdfPreview(surveyModel) { if (!previewDiv || !previewEmbed) return; const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.raw("blob").then((blob) => { if (pdfBlobUrl) { URL.revokeObjectURL(pdfBlobUrl); } pdfBlobUrl = URL.createObjectURL(blob); previewEmbed.setAttribute("src", pdfBlobUrl); previewDiv.style.display = "block"; }); } function previewPdf(surveyModel) { if (!previewDiv) return; if (previewDiv.style.display !== "none") { previewDiv.style.display = "none"; return; } showPdfPreview(surveyModel); } const survey = new Model(json); survey.showCompleteButton = false; survey.navigationButtonsLocation = "topBottom"; survey.addNavigationItem({ id: "survey_save_as_file", title: "Download PDF", action: () => { saveSurveyToPdf("surveyResult.pdf", survey); } }); survey.addNavigationItem({ id: "survey_pdf_preview", title: "Preview PDF", visible: window.navigator.pdfViewerEnabled, action: () => { previewPdf(survey); } }); survey.render(document.getElementById("surveyElement")); ``` ### `src/json.js` ```js export const json = { "title": "Background Check Consent Form", "headerView": "advanced", "questionErrorLocation": "bottom", "checkErrorsMode": "onValueChanged", "questionsOnPageMode": "singlePage", "pages": [ { "name": "personal-details", "title": "Part A - Personal Details", "elements": [ { "type": "panel", "name": "part-a-panel", "title": "Personal Details", "elements": [ { "type": "text", "name": "surname", "title": "Surname", "maxLength": 35 }, { "type": "text", "name": "surname-at-birth", "startWithNewLine": false, "title": "Surname at Birth", "maxLength": 35 }, { "type": "matrixdynamic", "name": "full-given-names", "title": "Full Given Names", "description": "Enter all given names. Do not use initials.", "descriptionLocation": "underTitle", "showHeader": false, "columns": [ { "name": "given-names-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add name" }, { "type": "matrixdynamic", "name": "other-names", "startWithNewLine": false, "title": "Other Names Used", "description": "Nicknames, pseudonyms, or married names, if applicable.", "descriptionLocation": "underTitle", "showHeader": false, "columns": [ { "name": "other-names-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add name" }, { "type": "text", "name": "name-change", "title": "Name Change", "description": "Complete if you changed your name for a reason other than marriage.", "descriptionLocation": "underInput", "maxLength": 35 }, { "type": "multipletext", "name": "date-place", "startWithNewLine": false, "title": "Date and Place of Name Change", "items": [ { "name": "date", "inputType": "date", "title": "Date", "validators": [ { "type": "expression", "text": "The date of name change must be after the date of birth.", "expression": "diffDays({date-place.date}, {dob}) > 1 and {date-place.date} > {dob}" } ] }, { "name": "place", "title": "Place" } ], "itemTitleWidth": "45" }, { "type": "text", "name": "dob", "title": "Date of Birth", "validators": [ { "type": "expression", "text": "You must be at least 18 years old.", "expression": "age({dob}) >= 18" } ], "inputType": "date" }, { "type": "text", "name": "place-of-birth", "startWithNewLine": false, "title": "Place of Birth", "description": "City, province or state, and country.", "descriptionLocation": "underInput" }, { "type": "radiogroup", "name": "gender", "maxWidth": "50%", "title": "Gender", "choices": [ { "value": "female", "text": "Female" }, { "value": "male", "text": "Male" } ], "showOtherItem": true, "otherText": "Other (please specify)" }, { "type": "text", "name": "insurance", "title": "Social Insurance Number", "maskType": "pattern", "maskSettings": { "pattern": "999999999" } }, { "type": "text", "name": "personal-business-reg-number", "startWithNewLine": false, "title": "Business Registration Number", "description": "Complete if applicable.", "descriptionLocation": "underInput" }, { "type": "matrixdynamic", "name": "tel-numbers", "title": "Telephone Numbers", "description": "List all telephone numbers where you can be reached.", "descriptionLocation": "underTitle", "showHeader": false, "columns": [ { "name": "tel-numbers-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add number" }, { "type": "matrixdynamic", "name": "email-addresses", "startWithNewLine": false, "title": "Email Addresses", "description": "List all email addresses used to contact you.", "descriptionLocation": "underTitle", "showHeader": false, "columns": [ { "name": "emails-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add email" }, { "type": "radiogroup", "name": "civil-status", "title": "Civil Status", "colCount": 2, "choices": [ { "value": "single", "text": "Single" }, { "value": "married", "text": "Married" }, { "value": "partnership", "text": "Common law partnership" }, { "value": "separated", "text": "Separated" }, { "value": "divorced", "text": "Divorced" }, { "value": "widowed", "text": "Widowed" } ] } ] } ] }, { "name": "partner-details", "title": "Part B - Partner Details", "description": "Provide partner information if applicable.", "elements": [ { "type": "panel", "name": "part-b", "title": "Partner Information", "elements": [ { "type": "text", "name": "partner-surname", "title": "Partner Surname" }, { "type": "text", "name": "partner-surname-at-birth", "startWithNewLine": false, "title": "Partner Surname at Birth" }, { "type": "matrixdynamic", "name": "partner-full-given-names", "maxWidth": "50%", "title": "Partner Full Given Names", "description": "Enter all given names. Do not use initials.", "descriptionLocation": "underTitle", "showHeader": false, "columns": [ { "name": "partner-given-names-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add name" }, { "type": "text", "name": "partner-name-change", "title": "Partner Name Change", "description": "Complete if applicable and not related to marriage.", "descriptionLocation": "underInput" }, { "type": "multipletext", "name": "date-place-partner", "startWithNewLine": false, "title": "Date and Place of Name Change", "items": [ { "name": "date", "inputType": "date", "title": "Date" }, { "name": "place", "title": "Place" } ], "itemTitleWidth": "45" }, { "type": "text", "name": "dob-partner", "title": "Partner Date of Birth", "validators": [ { "type": "expression", "text": "Partner must be at least 18 years old.", "expression": "age({dob-partner}) >= 18" } ], "inputType": "date" }, { "type": "text", "name": "partner-place-birth", "startWithNewLine": false, "title": "Partner Place of Birth", "description": "City, province or state, and country.", "descriptionLocation": "underInput" }, { "type": "matrixdynamic", "name": "citizenship", "maxWidth": "50%", "title": "Current Citizenship", "description": "Enter all countries of citizenship.", "showHeader": false, "columns": [ { "name": "citizenship-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add country" }, { "type": "radiogroup", "name": "partner-gender", "maxWidth": "50%", "title": "Partner Gender", "startWithNewLine": false, "choices": [ { "value": "female", "text": "Female" }, { "value": "male", "text": "Male" } ], "showOtherItem": true, "otherText": "Other (please specify)" }, { "type": "text", "name": "city-marriage", "title": "City and Province or State of Marriage or Partnership" }, { "type": "text", "name": "date-marriage", "startWithNewLine": false, "title": "Date of Marriage or Partnership", "inputType": "date" }, { "type": "text", "name": "country-marriage", "title": "Country of Marriage or Partnership" }, { "type": "text", "name": "partner-insurance", "title": "Partner Social Insurance Number", "maskType": "pattern", "maskSettings": { "pattern": "999999999" } }, { "type": "text", "name": "partner-business-reg-number", "startWithNewLine": false, "title": "Partner Business Registration Number", "description": "Complete if applicable.", "descriptionLocation": "underInput" }, { "type": "boolean", "name": "same-address", "title": "Is the partner address the same as the candidate address?" }, { "type": "text", "name": "address", "title": "Partner Address", "description": "Complete if the address is different." }, { "type": "text", "name": "city", "title": "City", "description": "Complete if the address is different." }, { "type": "text", "name": "province-state", "startWithNewLine": false, "title": "Province or State", "description": "Complete if the address is different." }, { "type": "text", "name": "postal-code", "title": "Postal Code", "description": "Complete if the address is different." }, { "type": "text", "name": "country", "startWithNewLine": false, "title": "Country", "description": "Complete if the address is different." } ] } ] }, { "name": "part-c", "title": "Part C", "elements": [ { "type": "paneldynamic", "name": "previous-partners", "title": "Previous Partners", "description": "List any previous partners from the last five (5) years, if applicable.", "templateTitle": "Previous Partner #{panelIndex}", "panelCount": 3, "panelsState": "firstExpanded", "templateElements": [ { "type": "text", "name": "pp-surname", "title": "Surname" }, { "type": "text", "name": "pp-full-given-names", "startWithNewLine": false, "title": "Full Given Names" }, { "type": "text", "name": "pp-surname-at-birth", "startWithNewLine": false, "title": "Surname at Birth" }, { "type": "text", "name": "pp-dob", "title": "Date of Birth", "inputType": "date" }, { "type": "text", "name": "pp-place-birth", "startWithNewLine": false, "title": "Place of Birth", "description": "City, province or state, and country.", "descriptionLocation": "underInput" }, { "type": "matrixdynamic", "name": "pp-current-citizenships", "maxWidth": "50%", "title": "Current Citizenship(s)", "description": "Enter all countries of citizenship.", "showHeader": false, "columns": [ { "name": "pp-current-citizenships-matrix", "cellType": "text", "isUnique": true } ], "rowCount": 3, "confirmDelete": true, "confirmDeleteText": "Are you sure you want to delete this entry?", "addRowText": "Add country" } ] }, { "type": "paneldynamic", "name": "relatives", "title": "Relatives", "description": "Include parents, siblings, children (including step or half siblings or children), and parents-in-law. Do not use initials.", "templateTitle": "Relative #{panelIndex}", "panelCount": 3, "panelsState": "firstExpanded", "addPanelText": "Add relative", "templateElements": [ { "type": "text", "name": "relative-full-name", "title": "Full Name", "description": "Surname and all given names, including maiden name.", "descriptionLocation": "underInput" }, { "type": "text", "name": "relative-relationship", "startWithNewLine": false, "title": "Relationship", "dataList": [ "Mother", "Father", "Brother", "Sister", "Aunt", "Uncle", "Child", "Half-sister", "Half-brother", "Stepsister", "Stepbrother", "Mother-in-law", "Father-in-law", "Sister-in-law", "Brother-in-law", "Grandmother", "Grandfather", "Granddaughter", "Grandson", "Niece", "Nephew", "Cousin", "Stepmother", "Stepfather", "Daughter-in-law", "Son-in-law" ] }, { "type": "text", "name": "relative-place-of-birth", "title": "Place of Birth", "description": "City, province or state, and country.", "descriptionLocation": "underInput" }, { "type": "text", "name": "relative-date-of-birth", "startWithNewLine": false, "title": "Date of Birth", "inputType": "date" }, { "type": "comment", "name": "relative-current-address", "title": "Current Address", "description": "Apartment or street number, street name, city, province or state, and country.", "descriptionLocation": "underInput", "rows": 1, "autoGrow": true }, { "type": "text", "name": "relative-date-of-death", "startWithNewLine": false, "title": "Date of Death", "description": "Complete if applicable.", "descriptionLocation": "underInput", "inputType": "date" }, { "type": "comment", "name": "relative-name-address-employer", "title": "Employer Name and Address", "rows": 1, "autoGrow": true }, { "type": "text", "name": "relative-job-title", "startWithNewLine": false, "title": "Job Title" } ] } ] }, { "name": "part-d", "title": "Part D - Residential and Service Information", "elements": [ { "type": "paneldynamic", "name": "addresses", "title": "Addresses in the Last 10 Years", "description": "List all addresses where you have lived during the last 10 years, starting with the most recent. Ensure there are no gaps in time.", "templateTitle": "Address #{panelIndex}", "panelCount": 3, "panelsState": "firstExpanded", "templateElements": [ { "type": "text", "name": "from", "title": "From", "description": "Enter start date in YYYY/MM format.", "descriptionLocation": "underInput", "maskType": "pattern", "maskSettings": { "pattern": "9999/99" } }, { "type": "text", "name": "to", "title": "To", "description": "Enter end date in YYYY/MM format or type Present if this is your current address.", "descriptionLocation": "underInput", "startWithNewLine": false }, { "type": "text", "name": "tel-number", "startWithNewLine": false, "title": "Telephone Number", "description": "Complete if applicable.", "descriptionLocation": "underInput" }, { "type": "text", "name": "apartment-number", "title": "Apartment Number", "inputType": "number" }, { "type": "comment", "name": "street-name-no", "startWithNewLine": false, "title": "Street Number and Street Name", "rows": 1, "autoGrow": true }, { "type": "text", "name": "current-address", "startWithNewLine": false, "title": "City" }, { "type": "text", "name": "employer-name-address", "title": "Province or State" }, { "type": "text", "name": "postal-code", "startWithNewLine": false, "title": "Postal Code", "maxLength": 10 }, { "type": "text", "name": "country-address", "startWithNewLine": false, "title": "Country" } ] }, { "type": "boolean", "name": "armed-forces", "maxWidth": "60%", "title": "Have you served in the U.S. Armed Forces (Regular or Reserves) at age 16 or older?" }, { "type": "text", "name": "service-number", "maxWidth": "40%", "startWithNewLine": false, "title": "Service Number", "description": "Provide your U.S. Armed Forces service number, if applicable." } ] }, { "name": "part-e", "title": "Part E", "elements": [ { "type": "boolean", "name": "employed", "title": "Are you currently employed?" }, { "type": "paneldynamic", "name": "employment", "title": "Employment History (Last 10 Years)", "description": "List all employment during the last 10 years, starting with the most recent. Ensure there are no gaps in time.", "templateTitle": "Employer #{panelIndex}", "panelCount": 5, "panelsState": "firstExpanded", "addPanelText": "Add employer", "templateElements": [ { "type": "text", "name": "employment-date", "title": "From", "description": "Enter start date in YYYY/MM format.", "descriptionLocation": "underInput", "maskType": "pattern", "maskSettings": { "pattern": "9999/99" } }, { "type": "text", "name": "employment-to", "startWithNewLine": false, "title": "To", "description": "Enter end date in YYYY/MM format or type Present if this is your current position.", "descriptionLocation": "underInput" }, { "type": "text", "name": "job-title-description", "startWithNewLine": false, "title": "Job Title or Description" }, { "type": "text", "name": "employment-apartment-number", "title": "Employer Name", "description": "Provide the full employer name." }, { "type": "text", "name": "job-site-address", "title": "Job Site Address", "description": "Street number and street name.", "descriptionLocation": "underInput" }, { "type": "text", "name": "job-site-city", "startWithNewLine": false, "title": "City" }, { "type": "text", "name": "job-site-state-province", "title": "Province or State" }, { "type": "text", "name": "job-site-postal-code", "startWithNewLine": false, "title": "Postal Code", "maxLength": 10 }, { "type": "text", "name": "job-site-country", "startWithNewLine": false, "title": "Country" } ] } ] } ] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "survey-core": "latest", "survey-js-ui": "latest", "survey-pdf": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/pdf-generator/examples/pdf-hr-background-check-consent-form-template/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/pdf-hr-background-check-consent-form-template/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-hr-background-check-consent-form-template/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-hr-background-check-consent-form-template/jquery.md)