---
title: Patient Feedback Questionnaire
product: PDF Generator
description: Download a printable patient feedback questionnaire in PDF. Create editable or prefilled healthcare survey forms using SurveyJS PDF Generator.
framework: Vanilla JS
source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-feedback-questionnaire-template/vanillajs
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Patient Feedback Questionnaire (Vanilla JS)

## Files

### `public/index.html`

```html
<div style="display: flex;">
    <div id="surveyElement" style="flex: 1 1 0%; height: 100%; min-width: 0;"></div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</div>
```

### `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": "Patient Feedback Questionnaire",
  "pages": [
    {
      "name": "page-one",
      "elements": [
        {
          "type": "panel",
          "name": "introduction",
          "elements": [
            {
              "type": "text",
              "name": "doctors-name",
              "maxWidth": "70%",
              "title": "Patient questionnaire for Dr",
              "titleLocation": "top"
            },
            {
              "type": "text",
              "name": "date-picker",
              "minWidth": "250px",
              "maxWidth": "30%",
              "startWithNewLine": false,
              "title": "Date",
              "titleLocation": "top",
              "inputType": "date"
            },
            {
              "type": "html",
              "name": "statement",
              "html": "<p>\nAll doctors in training are expected to seek feedback on a regular basis from those they work with and treat. Information from patients, relatives and friends is an important part of this process. The feedback will be reviewed and acted upon where appropriate.\n</p>\n\n<p>\nThe answers you give should only be about today's consultation with the named doctor.\n</p>\n\n<p>\nPlease do <strong>NOT</strong> write your name on this questionnaire. You will not be identified when your answers are given back to the doctor.\n</p>"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "who-for",
          "title": "Are you filling in this questionnaire for: ",
          "descriptionLocation": "underInput",
          "choices": [
            "Yourself ",
            "Your child ",
            "Your spouse or partner ",
            "Another relative or friend"
          ],
          "colCount": 4
        },
        {
          "type": "html",
          "name": "question1",
          "html": "<p>If you are filling this in for someone else, please answer the following questions from the patient's point of view.</p>"
        },
        {
          "type": "checkbox",
          "name": "visit-reason",
          "title": " Which of the following best describes the reason you saw the doctor today?",
          "description": "(Please tick all the boxes that apply)",
          "choices": [
            "To ask for advice ",
            "Because of an ongoing problem ",
            "For treatment (including prescriptions)",
            "Because of a one-off problem ",
            "For a routine check "
          ],
          "showOtherItem": true,
          "otherText": "Other (please give details)",
          "colCount": 3,
          "maxSelectedChoices": 6,
          "minSelectedChoices": 1
        },
        {
          "type": "rating",
          "name": "visit-importance",
          "title": "On a scale of 1 to 5, how important to your health and wellbeing was your reason for visiting the doctor today?",
          "rateType": "stars",
          "minRateDescription": "Not very important",
          "maxRateDescription": "Very important"
        },
        {
          "type": "matrix",
          "name": "how-good-matrix",
          "title": "How good was your doctor today at each of the following?",
          "alternateRows": true,
          "rowTitleWidth": "180px",
          "columns": [
            {
              "value": "poor",
              "text": "Poor"
            },
            {
              "value": "less",
              "text": "Less than satisfactory"
            },
            {
              "value": "satisfactory",
              "text": "Satisfactory"
            },
            {
              "value": "good",
              "text": "Good"
            },
            {
              "value": "very-good",
              "text": "Very good"
            },
            {
              "value": "not-applicable",
              "text": "Does not apply"
            }
          ],
          "rows": [
            {
              "value": "polite",
              "text": "Being polite"
            },
            {
              "value": "ease",
              "text": "Making you feel at ease"
            },
            {
              "value": "listeb",
              "text": "Listening to you"
            },
            {
              "value": "assess",
              "text": "Assessing your medical condition"
            },
            {
              "value": "explain",
              "text": "Explaining your condition and treatment"
            },
            {
              "value": "involve",
              "text": "Involving you in decisions about your treatment"
            },
            {
              "value": "provide",
              "text": "Providing or arranging treatment for you"
            }
          ],
          "eachRowRequired": true
        },
        {
          "type": "matrix",
          "name": "agree-matrix",
          "title": "Please decide how strongly you agree or disagree with the following statements",
          "alternateRows": true,
          "rowTitleWidth": "180px",
          "columns": [
            {
              "value": "1",
              "text": "Strongly disagree"
            },
            {
              "value": "2",
              "text": "Disagree"
            },
            {
              "value": "3",
              "text": "Neutral"
            },
            {
              "value": "4",
              "text": "Agree"
            },
            {
              "value": "5",
              "text": "Strongly agree"
            },
            {
              "value": "6",
              "text": "Does not apply"
            }
          ],
          "rows": [
            {
              "value": "1",
              "text": "This doctor will keep information about me confidential"
            },
            {
              "value": "2",
              "text": "This doctor is honest and trustworthy"
            }
          ],
          "eachRowRequired": true
        },
        {
          "type": "boolean",
          "name": "confidence",
          "title": "I am confident about this doctor’s ability to provide care."
        },
        {
          "type": "boolean",
          "name": "happiness",
          "title": "I would be completely happy to see this doctor again."
        },
        {
          "type": "boolean",
          "name": "usual-doctor",
          "title": "Was this visit with your usual doctor? "
        },
        {
          "type": "comment",
          "name": "optional-comments",
          "title": "Please add any other comments you want to make about this doctor. ",
          "description": "Please note: No patients will be identified when this information is given to the doctor. ",
          "maxLength": 250,
          "rows": 2,
          "autoGrow": true
        }
      ]
    },
    {
      "name": "page-two",
      "elements": [
        {
          "type": "html",
          "name": "question3",
          "html": "<p>The next questions will provide the doctor with some basic information about who took part in the survey. If you are filling this in on behalf of a child or a patient with a disability, please provide details about the patient.</p>"
        },
        {
          "type": "panel",
          "name": "demographics",
          "elements": [
            {
              "type": "panel",
              "name": "gender_age",
              "elements": [
                {
                  "type": "radiogroup",
                  "name": "gender",
                  "title": "Are you:",
                  "titleLocation": "left",
                  "choices": [
                    "Female",
                    "Male"
                  ],
                  "colCount": 2
                },
                {
                  "type": "radiogroup",
                  "name": "age",
                  "title": "Age:",
                  "titleLocation": "left",
                  "choices": [
                    "Under 15",
                    "15–20",
                    "21–40",
                    "40–60",
                    "60 or over"
                  ],
                  "colCount": 5
                }
              ],
              "colCount": 2
            },

            {
              "type": "panel",
              "name": "ethnicity",
              "title": "What is your ethnic group?",
              "description": "Tick one box in each section if applicable.",
              "elements": [
                {
                  "type": "checkbox",
                  "name": "white",
                  "title": "A. White",
                  "choices": [
                    "British",
                    "Irish"
                  ],
                  "showOtherItem": true,
                  "otherText": "Any other White background (please write in)"
                },
                {
                  "type": "checkbox",
                  "name": "mixed",
                  "title": "B. Mixed",
                  "choices": [
                    "White and Black Caribbean",
                    "White and Black African",
                    "White and Asian"
                  ],
                  "showOtherItem": true,
                  "otherText": "Any other Mixed background (please write in)"
                },
                {
                  "type": "checkbox",
                  "name": "asian",
                  "title": "C. Asian or Asian British",
                  "choices": [
                    "Indian",
                    "Pakistani",
                    "Bangladeshi"
                  ],
                  "showOtherItem": true,
                  "otherText": "Any other Asian background (please write in)"
                },
                {
                  "type": "checkbox",
                  "name": "black",
                  "title": "D. Black or Black British",
                  "choices": [
                    "Caribbean",
                    "African"
                  ],
                  "showOtherItem": true,
                  "otherText": "Any other Black background (please write in)"
                },
                {
                  "type": "checkbox",
                  "name": "other",
                  "title": "E. Chinese or other ethnic group",
                  "choices": [
                    "Chinese"
                  ],
                  "showOtherItem": true,
                  "otherText": "Any other (please write in)"
                }
              ]
            }
          ]
        }
        // {
        //   "type": "panel",
        //   "name": "gender-age-ethnicity-panel",
        //   "elements": [
        //     {
        //       "type": "radiogroup",
        //       "name": "gender",
        //       "title": "Are you:",
        //       "titleLocation": "left",
        //       "choices": [
        //         {
        //           "value": "Item 1",
        //           "text": "Female"
        //         },
        //         {
        //           "value": "Item 2",
        //           "text": "Male"
        //         }
        //       ],
        //       "colCount": 5
        //     },
        //     {
        //       "type": "radiogroup",
        //       "name": "age",
        //       "title": "Age:",
        //       "titleLocation": "left",
        //       "choices": [
        //         "Under 15 ",
        //         "15–20 ",
        //         "21–40 ",
        //         "40–60 ",
        //         "60 or over"
        //       ],
        //       "colCount": 5
        //     },
        //     {
        //       "type": "dropdown",
        //       "name": "ethnic group",
        //       "title": "What is your ethnic group?",
        //       "choices": [
        //         "A - White",
        //         "B - Mixed",
        //         "C - Asian or Asian British",
        //         "D - Black or Black British",
        //         "E - Chinese or other ethnic group"
        //       ]
        //     },
        //     {
        //       "type": "checkbox",
        //       "name": "white",
        //       "title": "If you selected 'White', specify your background",
        //       "description": "Leave blank if not applicable.",
        //       "choices": [
        //         {
        //           "value": "british",
        //           "text": "British"
        //         },
        //         {
        //           "value": "irish",
        //           "text": "Irish"
        //         }
        //       ],
        //       "showOtherItem": true,
        //       "otherText": "Any other White background (please write in)",
        //       "colCount": 3
        //     },
        //     {
        //       "type": "checkbox",
        //       "name": "mixed",
        //       "title": "If you selected 'Mixed', specify your background",
        //       "description": "Leave blank if not applicable.",
        //       "choices": [
        //         {
        //           "value": "whiteBlackCaribbean",
        //           "text": "White and Black Caribbean"
        //         },
        //         {
        //           "value": "whiteBlackAfrican",
        //           "text": "White and Black African"
        //         },
        //         {
        //           "value": "whiteAsian",
        //           "text": "White and Asian"
        //         }
        //       ],
        //       "showOtherItem": true,
        //       "otherText": "Any other Mixed background (please write in)",
        //       "colCount": 3
        //     },
        //     {
        //       "type": "checkbox",
        //       "name": "asian",
        //       "title": "If you selected 'Asian or Asian British', specify your background",
        //       "description": "Leave blank if not applicable.",
        //       "choices": [
        //         {
        //           "value": "indian",
        //           "text": "Indian"
        //         },
        //         {
        //           "value": "pakistani",
        //           "text": "Pakistani"
        //         },
        //         {
        //           "value": "bangladeshi",
        //           "text": "Bangladeshi"
        //         }
        //       ],
        //       "showOtherItem": true,
        //       "otherText": "Any other Asian background (please write in)",
        //       "colCount": 3
        //     },
        //     {
        //       "type": "checkbox",
        //       "name": "black",
        //       "title": "If you selected 'Black or Black British', specify your background",
        //       "description": "Leave blank if not applicable.",
        //       "choices": [
        //         {
        //           "value": "caribbean",
        //           "text": "Caribbean"
        //         },
        //         {
        //           "value": "african",
        //           "text": "African"
        //         }
        //       ],
        //       "showOtherItem": true,
        //       "otherText": "Any other Black background (please write in)",
        //       "colCount": 3
        //     },
        //     {
        //       "type": "checkbox",
        //       "name": "other",
        //       "title": "If you selected 'Chinese or other ethnic group', specify your background",
        //       "description": "Leave blank if not applicable.",
        //       "choices": [
        //         {
        //           "value": "chinese",
        //           "text": "Chinese"
        //         }
        //       ],
        //       "showOtherItem": true,
        //       "otherText": "Any other (please write in)",
        //       "colCount": 3
        //     }
        //   ]
        // }
      ]
    }
  ],
  "questionsOnPageMode": "singlePage",
  "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-healthcare-patient-feedback-questionnaire-template/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-feedback-questionnaire-template/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-feedback-questionnaire-template/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-patient-feedback-questionnaire-template/jquery.md)