--- title: Loan Application Form product: PDF Generator description: Download a printable loan application form in PDF. Generate editable or prefilled loan request forms using SurveyJS PDF Generator. framework: Vanilla JS source: https://surveyjs.io/pdf-generator/examples/template-loan-application-form/vanillajs index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Loan Application 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; } 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": "Mortgage Loan Application Form", "questionsOnPageMode": "singlePage", "headerView": "advanced", "pages": [ { "name": "overview", "title": "Overview of your Mortgage Application", "elements": [ { "type": "radiogroup", "name": "loan-purpose", "title": "Purpose of the mortgage application", "choices": [ { "value": "remortgage", "text": "Remortgage" }, { "value": "equity-transfer", "text": "Transfer of equity" }, { "value": "house-purchase", "text": "House purchase" }, { "value": "term-extension", "text": "Term extension" }, { "value": "further-advance", "text": "Further advance" } ], "colCount": 2 }, { "type": "boolean", "name": "guarantor", "startWithNewLine": false, "title": "Is there a guarantor for this application?" }, { "type": "radiogroup", "name": "property-use", "title": "Intended use of the property", "choices": [ { "value": "residential", "text": "Residential" }, { "value": "buy-to-let", "text": "Buy to let" }, { "value": "holiday-let", "text": "Holiday let" } ] }, { "type": "boolean", "name": "holiday-let-time-period", "startWithNewLine": false, "title": "If this is a holiday let, do you intend to personally use the property for more than 60 days per year?", "description": "Complete if applicable." } ] }, { "name": "property-details", "title": "Property Details", "elements": [ { "type": "text", "name": "street-address", "title": "Street address", "minWidth": "auto" }, { "type": "text", "name": "city", "title": "City or town", "startWithNewLine": false, "minWidth": "auto" }, { "type": "text", "name": "zip", "startWithNewLine": false, "title": "Zip code", "minWidth": "auto" }, { "type": "radiogroup", "name": "country", "title": "Country", "showOtherItem": true, "choices": [ "United States", "United Kingdom", "Canada", "Australia" ], "colCount": 2 }, { "type": "boolean", "name": "used-as-main-residence", "title": "Will this property be your main residence?", "minWidth": "auto" }, { "type": "boolean", "name": "is-already-mortgaged", "startWithNewLine": false, "title": "Is there an existing mortgage on this property?", "description": "If yes, provide details in supporting documents if required.", "descriptionLocation": "underInput", "minWidth": "auto" }, { "type": "boolean", "name": "used-for-business", "startWithNewLine": false, "title": "Will any part of the property be used for business purposes?", "minWidth": "auto" } ] }, { "name": "personal-info", "title": "Personal Information", "elements": [ { "type": "paneldynamic", "name": "applicant-info", "titleLocation": "hidden", "panelCount": 3, "panelsState": "firstExpanded", "templateTitle": "Applicant #{panelIndex}", "addPanelText": "Add an applicant", "templateElements": [ { "type": "multipletext", "name": "full-name", "title": "Full Name", "items": [ { "name": "first-name", "title": "First name" }, { "name": "last-name", "title": "Last name" } ] }, { "type": "multipletext", "name": "birth-info", "title": "Birth Information", "startWithNewLine": false, "items": [ { "name": "birthplace", "title": "Place of birth" }, { "name": "birthdate", "inputType": "date", "title": "Date of birth" } ] }, { "type": "text", "name": "phone", "title": "Phone number", "maskType": "pattern", "maskSettings": { "saveMaskedValue": true, "pattern": "+9 (999) 999-99-99" } }, { "type": "text", "name": "street-address", "title": "Street address" }, { "type": "text", "name": "city", "title": "City or town", "startWithNewLine": false }, { "type": "text", "name": "zip", "startWithNewLine": false, "title": "Zip code" }, { "type": "radiogroup", "name": "country", "title": "Country", "showOtherItem": true, "choices": [ "United States", "United Kingdom", "Canada", "Australia" ], "colCount": 2 } ] }, { "type": "panel", "name": "documents", "title": "Documents", "elements": [ { "type": "matrixdropdown", "name": "ids", "title": "Provide two identity documents and attach their copies to this application.", "columns": [ { "name": "id-type", "title": "ID type", "cellType": "radiogroup", "choices": [ "State identification card", "Driver license", "Passport", "Military ID", "Permanent resident card", "Certificate of citizenship", "Certificate of naturalization" ], "colCount": 2 }, { "name": "expiration-date", "title": "Expiration date", "cellType": "text", "inputType": "date", "width": "20%" } ], "rows": [ { "value": "first-id-info", "text": "Document 1" }, { "value": "second-id-info", "text": "Document 2" } ], "rowTitleWidth": "15%" } ] } ] }, { "name": "employment-details", "title": "Employment Details", "elements": [ { "type": "paneldynamic", "name": "employer", "titleLocation": "hidden", "defaultValue": [{}], "panelCount": 3, "panelsState": "firstExpanded", "templateTitle": "Employer #{panelIndex}", "addPanelText": "Add an employer", "templateElements": [ { "type": "comment", "name": "organization", "title": "Name of organization" }, { "type": "multipletext", "name": "occupation", "title": "Occupation", "items": [ { "name": "position", "title": "Position" }, { "name": "employment-date", "inputType": "date", "title": "Employed since" } ] }, { "type": "multipletext", "name": "income", "title": "Monthly income in USD", "items": [ { "name": "basic-salary", "title": "Basic salary" }, { "name": "guaranteed-bonus", "title": "Guaranteed bonus" }, { "name": "nonguaranteed-bonus", "title": "Non guaranteed bonus" } ] }, { "type": "boolean", "name": "have-other-income-sources", "title": "Do you have other regular income sources?", "showCommentArea": true, "commentText": "If yes, specify" }, { "type": "file", "name": "employment-verification-letter", "title": "Employment verification letter", "description": "Attach a signed letter from your employer to this application." } ] } ] }, { "name": "loan-details", "title": "Requested Loan Details", "elements": [ { "type": "text", "name": "loan-amount", "title": "Requested loan amount in USD", "maskType": "currency", "maskSettings": { "prefix": "$" } }, { "type": "text", "name": "loan-tenure", "startWithNewLine": false, "title": "Loan tenure in years", "inputType": "number", "min": 1, "max": 25 } ] } ] }; ``` ### `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/template-loan-application-form/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/template-loan-application-form/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/template-loan-application-form/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/template-loan-application-form/jquery.md)