---
title: Informed Consent Form
product: PDF Generator
description: Get a printable employee informed consent form in PDF. Create editable or prefilled employee consent forms with SurveyJS PDF Generator.
framework: Vanilla JS
source: https://surveyjs.io/pdf-generator/examples/pdf-hr-informed-consent-form-template/vanillajs
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Informed Consent Form (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": "Consent Form for Processing Personal Data",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "html",
          "name": "information",
          "html": "<p>During the event you may be photographed or filmed. By giving your consent in writing or orally, [YOUR COMPANY NAME] may use such material in communications intended for the public. You may withdraw consent at any time by informing the organisers. In addition to personal data processed for event participation, you can provide consent for one or more specific personal data processing activities below.</p>"
        },
        {
          "type": "checkbox",
          "name": "consent-options",
          "titleLocation": "hidden",
          "choices": [
            {
              "value": "media-consent",
              "text": "I consent that video(s) and/or photo(s) are taken of me during the event/meeting and used in communications activities."
            },
            {
              "value": "contact-consent",
              "text": "I consent that my name and contact details may be published in the list of participants of the event/meeting."
            }
          ]
        },
        {
          "type": "multipletext",
          "name": "participant-details",
          "title": "Participant Details",
          "items": [
            { "name": "full-name", "title": "Full Name" },
            { "name": "department", "title": "Department (if applicable)" },
            { "name": "date", "title": "Date", "inputType": "date" }
          ]          
        },
        {
          "type": "signaturepad",
          "name": "signature",
          "startWithNewLine": false,
          "title": "Signature",
          "isRequired": true,
          "signatureHeight": 150,
          "penColor": "#4C6489"
        }
      ]
    }
  ],
  "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-informed-consent-form-template/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/pdf-hr-informed-consent-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-hr-informed-consent-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-hr-informed-consent-form-template/jquery.md)