--- title: 360 Degree Feedback Review Form product: PDF Generator description: Download a printable 360 degree feedback review form in PDF. Generate editable or prefilled employee evaluation forms with SurveyJS PDF Generator. framework: Vanilla JS source: https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/vanillajs index: https://surveyjs.io/pdf-generator/examples/overview.md --- # 360 Degree Feedback Review 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": "360 Degree Feedback Review Form", "questionsOnPageMode": "singlePage", "pages": [ { "name": "page-one", "title": "Introduction", "elements": [ { "type": "panel", "name": "intro", "requiredErrorText": "A response is required for each question in this section.", "elements": [ { "type": "text", "name": "employee-name", "title": "Employee Name", "isRequired": true }, { "type": "text", "name": "completed-by", "title": "Completed By", "isRequired": true }, { "type": "text", "name": "date", "title": "Date Completed", "isRequired": true, "inputType": "date" }, { "type": "text", "name": "role", "title": "Role", "description": "e.g. Self/Supervisor/Peer/Direct Report etc.", "isRequired": true } ] }, { "type": "panel", "name": "instructions", "elements": [ { "type": "html", "name": "instructions-text", "html": "

Instructions

In keeping with our organization's goal to continuously improve, we are asking for your candid feedback on the performance of the above individual this past year. A confidential summary of all feedback received will be prepared for each individual so that he or she can use the feedback to learn and develop.

Your individual feedback will be averaged into all responses to protect your anonymity and ensure that the results each individual receives are completely confidential. Our Human Resources team may also prepare an overall summary to assess areas for additional company-provided training.

Select a numerical rating and use the space provided at the end of each section to offer commentary and contextual insights to support and substantiate your rating, as well as to facilitate conversation as part of the recipient's formal performance evaluation.

We recommend rating employee effectiveness using the conversational 5-point scale below. If you do not feel you have sufficient insight to score the employee on a particular measure, please select N/A.

Thank you for your contribution.

" }, { "type": "html", "name": "score-definitions", "html": "

Scoring definitions

1 = Unsatisfactory: Performance consistently fails to meet minimum position requirements; employee lacks skills required or fails to utilize necessary skills.

2 = Inconsistent: Performance meets some, but not all position requirements.

3 = Proficient: Performance consistently meets position requirements.

4 = Highly Effective: Performance frequently exceeds position requirements.

NA = New / Not Applicable: Employee has not been in position long enough to have demonstrated the essential elements of the position and will be reviewed at a later agreed upon date.

" } ] } ] }, { "name": "customer-service", "title": "Customer Service Skills", "elements": [ { "type": "matrixdropdown", "name": "customer-service-skills", "title": "Customer Service Skills", "showCommentArea": true, "commentText": "Comments", "showHeader": false, "alternateRows": true, "rowTitleWidth": "60%", "columns": [ { "name": "rating", "cellType": "rating", "width": "30%", "resetValueIf": "{row.checkbox} notempty", "totalType": "avg", "totalFormat": "Avg score: {0}", "totalDisplayStyle": "decimal", "autoGenerate": false, "rateCount": 4, "rateValues": [1, 2, 3, 4] }, { "name": "checkbox", "cellType": "checkbox", "colCount": 0, "width": "10%", "resetValueIf": "{row.rating} notempty", "totalType": "count", "totalFormat": "Total: {0}", "choices": [ { "value": "n-a", "text": "N/A" } ] } ], "rows": [ { "value": "client-relations", "text": "Develops meaningful client relationships" }, { "value": "listen-understand", "text": "Makes an effort to listen to and understand the client" }, { "value": "eagerness", "text": "Shows eagerness when working with clients" }, { "value": "satisfaction", "text": "Prioritizes client's satisfaction and looks to provide solutions" }, { "value": "fix-problems", "text": "Focuses on fixing problems rather than finding someone to blame" } ] } ] }, { "name": "communication-interpersonal-skills", "title": "Communication & Interpersonal Skills", "elements": [ { "type": "matrixdropdown", "name": "communication", "title": "Communication & Interpersonal Skills", "showCommentArea": true, "commentText": "Comments", "showHeader": false, "alternateRows": true, "rowTitleWidth": "60%", "columns": [ { "name": "rating", "cellType": "rating", "width": "30%", "resetValueIf": "{row.checkbox} notempty", "totalType": "avg", "totalFormat": "Avg score: {0}", "totalDisplayStyle": "decimal", "autoGenerate": false, "rateCount": 4, "rateValues": [1, 2, 3, 4] }, { "name": "checkbox", "cellType": "checkbox", "colCount": 0, "width": "10%", "resetValueIf": "{row.rating} notempty", "totalType": "count", "totalFormat": "Total: {0}", "choices": [ { "value": "n-a", "text": "N/A" } ] } ], "rows": [ { "value": "active", "text": "Is an engaging and active participant during meetings" }, { "value": "relations", "text": "Develops meaningful relationships with co-workers and peers" }, { "value": "follows", "text": "Informs, listens and follows direction regularly" }, { "value": "clear-communication", "text": "Provides clear written and verbal communication" }, { "value": "reliable", "text": "Demonstrates thoroughness, reliability and trustworthiness" } ] } ] }, { "name": "work-quality", "title": "Quality of Work", "elements": [ { "type": "matrixdropdown", "name": "quality", "title": "Quality of Work", "showCommentArea": true, "commentText": "Comments", "showHeader": false, "alternateRows": true, "rowTitleWidth": "60%", "columns": [ { "name": "rating", "cellType": "rating", "width": "30%", "resetValueIf": "{row.checkbox} notempty", "totalType": "avg", "totalFormat": "Avg score: {0}", "totalDisplayStyle": "decimal", "autoGenerate": false, "rateCount": 4, "rateValues": [1, 2, 3, 4] }, { "name": "checkbox", "cellType": "checkbox", "colCount": 0, "width": "10%", "resetValueIf": "{row.rating} notempty", "totalType": "count", "totalFormat": "Total: {0}", "choices": [ { "value": "n-a", "text": "N/A" } ] } ], "rows": [ { "value": "accurate", "text": "Consistently provides thorough and accurate work" }, { "value": "pressure", "text": "Ability to work under pressure and learn from previous mistakes" }, { "value": "issues", "text": "Accurately checks processes and tasks, handles issues in a timely manner" }, { "value": "timely", "text": "Ability to work quickly and submit deliverables in a timely manner" }, { "value": "details", "text": "Manages work details; organized and detailed in work product" } ] } ] }, { "name": "judgements-decisions", "title": "Judgement & Decision-Making Skills", "elements": [ { "type": "matrixdropdown", "name": "decisions", "title": "Judgement & Decision-Making Skills", "showCommentArea": true, "commentText": "Comments", "showHeader": false, "alternateRows": true, "rowTitleWidth": "60%", "columns": [ { "name": "rating", "cellType": "rating", "width": "30%", "resetValueIf": "{row.checkbox} notempty", "totalType": "avg", "totalFormat": "Avg score: {0}", "totalDisplayStyle": "decimal", "autoGenerate": false, "rateCount": 4, "rateValues": [1, 2, 3, 4] }, { "name": "checkbox", "cellType": "checkbox", "colCount": 0, "width": "10%", "resetValueIf": "{row.rating} notempty", "totalType": "count", "totalFormat": "Total: {0}", "choices": [ { "value": "n-a", "text": "N/A" } ] } ], "rows": [ { "value": "logical-thinking", "text": "Thinks logically and practically before making decisions" }, { "value": "independent", "text": "Works well independently and with little direction" }, { "value": "confidential-information", "text": "Ability to handle confidential information" }, { "value": "independent-thought", "text": "Uses independent thought, reasoning and originality" }, { "value": "concise-clear", "text": "Makes concise and clear decisions under pressure" } ] } ] }, { "name": "other-competences", "title": "Other Competencies", "elements": [ { "type": "matrixdropdown", "name": "competencies", "title": "Other Competencies", "showCommentArea": true, "commentText": "Comments", "showHeader": false, "alternateRows": true, "rowTitleWidth": "60%", "columns": [ { "name": "rating", "cellType": "rating", "width": "30%", "resetValueIf": "{row.checkbox} notempty", "totalType": "avg", "totalFormat": "Avg score: {0}", "totalDisplayStyle": "decimal", "autoGenerate": false, "rateCount": 4, "rateValues": [1, 2, 3, 4] }, { "name": "checkbox", "cellType": "checkbox", "colCount": 0, "width": "10%", "resetValueIf": "{row.rating} notempty", "totalType": "count", "totalFormat": "Total: {0}", "choices": [ { "value": "n-a", "text": "N/A" } ] } ], "rows": [ { "value": "contributions", "text": "Demonstrates willingness to make significant contributions to the team" }, { "value": "proactive", "text": "Proactive and self-starter" }, { "value": "company-activities", "text": "Encourages and supports involvement in company activities and events" }, { "value": "changes", "text": "Encourages and embraces changes; maintains positivity in times of change" }, { "value": "respect-fairness", "text": "Treats everyone with respect and fairness" } ] }, { "type": "panel", "name": "totals", "readOnly": true, "title": "FOR HR TEAM ONLY" }, { "type": "expression", "name": "total-average", "title": "Total average score", "expression": "{customer-service-skills-total.rating} + {communication-total.rating} + {quality-total.rating} + {decisions-total.rating} + {competencies-total.rating}", "displayStyle": "decimal", "maximumFractionDigits": 2, "minimumFractionDigits": 2 }, { "type": "expression", "name": "total-n-a", "title": "Total 'N/A' answers", "expression": "{customer-service-skills-total.checkbox} + {communication-total.checkbox}", "maximumFractionDigits": 2, "minimumFractionDigits": 2 } ] } ], "headerView": "advanced" }; ``` ### `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-360-degree-feedback-review-form-template/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-hr-360-degree-feedback-review-form-template/jquery.md)