---
title: Dental Appointment Request
product: PDF Generator
description: Get a printable dental appointment request form in PDF. Create editable or prefilled patient request forms for your clinic using SurveyJS PDF Generator.
framework: Vanilla JS
source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/vanillajs
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Dental Appointment Request (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": "Dental Appointment Request",
  "description": "The first step towards a beautiful, healthy smile is to schedule an appointment. Please contact our office by phone or complete the appointment request form below. Our scheduling coordinator will contact you to confirm your appointment.",
  "pages": [
    {
      "name": "page-one",
      "elements": [
        {
          "type": "panel",
          "name": "personal",
          "title": "Personal Information",
          "questionTitleWidth": "170px",
          "questionTitleLocation": "left",
          "elements": [
            {
              "type": "text",
              "name": "first-name",
              "title": "First name",
              "isRequired": true
            },
            {
              "type": "text",
              "name": "middle-name",
              "title": "Middle name"
            },
            {
              "type": "text",
              "name": "last-name",
              "title": "Last name",
              "isRequired": true
            },
            {
              "type": "text",
              "name": "email",
              "title": "Email address",
              "isRequired": true,
              "inputType": "email",
              "autocomplete": "email",
              "placeholder": "example@gmail.com"
            },
            {
              "type": "text",
              "name": "phone",
              "title": "Contact phone",
              "isRequired": true,
              "inputType": "tel",
              "maskType": "pattern",
              "maskSettings": {
                "pattern": "+1(999) 999 999 99"
              }
            }
          ]
        },
        {
          "type": "boolean",
          "name": "first-visit",
          "title": "Is this your first visit to our clinic?"
        },
        {
          "type": "radiogroup",
          "name": "best-contact-times",
          "title": "Best Contact Times",
          "description": "If we need to reach, what would be the best time?",
          "choices": [
            {
              "value": "Morning",
              "text": "Morning (09:00-12:00)"
            },
            {
              "value": "Afternoon",
              "text": "Afternoon (12:00-17:00)"
            },
            {
              "value": "Evening",
              "text": "Evening (17:00-20:00)"
            }
          ]
        },
        {
          "type": "matrixdropdown",
          "name": "preferred-appointment-times",
          "title": "Preferred times(s) for an appointment?",
          "description": "Specify a preferred time for each day you selected",
          "columns": [
            {
              "name": "time",
              "title": "From",
              "cellType": "text",
              "inputType": "time",
              "min": "09:00",
              "max": "19:00"
            },
            {
              "name": "time-to",
              "title": "To",
              "cellType": "text",
              "inputType": "time"
            }
          ],
          "rows": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
          ],
          "allowAddRows": false,
          "allowRemoveRows": false
        },
        {
          "type": "boolean",
          "name": "insurance",
          "title": "Do you have dental insurance?",
          "isRequired": true
        },
        {
          "type": "panel",
          "name": "insurance-details",
          "title": "Insurance details",
          "description": "Complete the fields below corresponding to your dental insurance.",
          "elements": [
            {
              "type": "text",
              "name": "company-name",
              "title": "Company name"
            },
            {
              "type": "text",
              "name": "member-id",
              "startWithNewLine": false,
              "title": "Member ID"
            },
            {
              "type": "text",
              "name": "primary-policy-holder",
              "title": "Primary policy holder"
            },
            {
              "type": "text",
              "name": "date-of-birth",
              "startWithNewLine": false,
              "title": "Date of birth",
              "inputType": "date"
            }
          ]
        },
        {
          "type": "radiogroup",
          "name": "type-of-visit",
          "title": "Type of visit",
          "choices": [
            {
              "value": "checkup",
              "text": "Routine check-up and cleaning"
            },
            {
              "value": "emergency",
              "text": "Emergency"
            },
            {
              "value": "restorative",
              "text": "Restorative"
            }
          ]
        },
        {
          "type": "comment",
          "name": "describe-emergency",
          "title": "Describe your emergency (if applicable)",
          "maxLength": 200,
          "rows": 2,
          "autoGrow": true
        },
        {
          "type": "radiogroup",
          "name": "type-of-specialist",
          "title": "Which type of dental specialist are you looking to make an appointment with?",
          "choices": [
            "General Dentist",
            "Orthodontist",
            "Periodontist",
            "Endodontist",
            "Pediatric Dentist (Pedodontist)",
            "Prosthodontist",
            "Oral and Maxillofacial Surgeon"
          ],
          "colCount": 2
        }
      ]
    }
  ],
  "headerView": "advanced",
  "widthMode": "static",
  "width": "750px"
};
```

### `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-dental-appointment-request-template/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-dental-appointment-request-template/jquery.md)