--- title: Customize Form Fields product: PDF Generator description: Learn how to add visual and functional elements to your PDF forms. Our demo for JavaScript will show you how to provide additional context with a short annotation under a form field, implement custom behavior, and customize the appearance of form fields. framework: jQuery source: https://surveyjs.io/pdf-generator/examples/how-to-customize-form-fields-in-pdf-forms/jquery index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Customize Form Fields (jQuery) SurveyJS PDF Generator provides an API that allows you to add, remove, and substitute form field elements in a generated PDF form. This demo illustrates several common form field customizations, such as adding a short annotation under a form field, changing a form field's size, and using a different renderer for a question. To download the customized form, scroll the survey down to the bottom and click the "Save as PDF" button. ## Customize PDF Form Fields To customize form fields, handle the [`onRenderQuestion`](https://surveyjs.io/pdf-generator/documentation/api-reference/surveypdf#onRenderQuestion) event, which is raised once for each survey question. A handling function accepts a [`SurveyPDF`](https://surveyjs.io/pdf-generator/documentation/api-reference/surveypdf) instance as the first parameter and an `options` object with the following properties as the second parameter: - `options.question` A survey question that is being rendered. - `options.bricks` An array of [PDF bricks](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfbrick) used to render the question. Bricks are simple elements with specified content, size, and location. They are fundamental elements used to construct a PDF document. You can modify the bricks to customize rendering. - `options.point` An object with coordinates of the top-left corner of the element being rendered. This object contains the following properties: `{ xLeft: number, yTop: number }`. - `options.controller` A [`DocController`](https://surveyjs.io/pdf-generator/documentation/api-reference/doccontroller) object that provides access to main PDF document properties (font, margins, page width and height) and allows you to modify them. - `options.repository` A repository with classes that render elements to PDF. Use its `create` method to create a rendering class instance that you can then use to generate PDF bricks. Refer to the code listings for examples of using the `onRenderQuestion` event and its parameters. ## Override a Default Question Renderer If the default question renderer doesn't suit your needs, register a different renderer. For instance, the following code registers the `FlatQuestionDefault` renderer for the `"comment"` question type to render Long Text (Comment) questions as plain text: ```js import { FlatRepository, FlatQuestionDefault } from "survey-pdf"; FlatRepository.register("comment", FlatQuestionDefault); ``` ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import $ from "jquery"; import { Model } from "survey-core"; import "survey-js-ui"; import { SurveyPDF } from "survey-pdf"; import { QuestionFactory } from "survey-core"; import { SurveyHelper, FlatRepository, FlatQuestionDefault } 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; } // Add a short annotation under the form field surveyPDF .onRenderQuestion .add((_, options) => { if (options.question.name !== "pdf_bottomdesc") return; const plainBricks = options.bricks[0].unfold(); const lastBrick = plainBricks[plainBricks.length - 1]; const point = SurveyHelper.createPoint(lastBrick); return new Promise(resolve => { SurveyHelper .createDescFlat(point, options.question, options.controller, 'Short annotation under the form field') .then(descBrick => { options.bricks.push(descBrick); resolve(); }); }); }); // Change the question size surveyPDF .onRenderQuestion .add((surveyPDF, options) => { if (options.question.name !== "pdf_changesize") return; const flatMatrix = options.repository.create(surveyPDF, options.question, options.controller, "matrix"); const oldFontSize = options.controller.fontSize; options.controller.fontSize = oldFontSize / 2.0; return new Promise(resolve => { flatMatrix .generateFlats(options.point) .then(matrixBricks => { options.controller.fontSize = oldFontSize; options.bricks = matrixBricks; resolve(); }); }); }); 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); } // Use the `FlatQuestionDefault` renderer for Long Text (Comment) questions // to render them as plain text FlatRepository.register("comment", FlatQuestionDefault); 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); } }); $("#surveyElement").Survey({ model: survey }); ``` ### `src/json.js` ```js export const json = { "elements": [ { "type": "text", "title": "Add a short annotation under the form field", "name": "pdf_bottomdesc" }, { "type": "matrix", "title": "Change the question size", "name": "pdf_changesize", "columns": [ "Column 1", "Column 2", "Column 3" ], "rows": [ "Row 1", "Row 2" ] }, { "type": "comment", "title": "Render a Long Text (Comment) question as plain text", "name": "pdf_commentasplaintext", "defaultValue": "Sed venenatis nisl mi, eget lobortis augue venenatis ac.\n\nUt consectetur, nunc a tristique tempor, enim neque porttitor urna, non accumsan diam sem at erat. Suspendisse in sapien ac ligula aliquam porta a eu lorem" } ] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "jquery": "latest", "survey-core": "latest", "survey-js-ui": "latest", "survey-pdf": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/pdf-generator/examples/how-to-customize-form-fields-in-pdf-forms/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/how-to-customize-form-fields-in-pdf-forms/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/how-to-customize-form-fields-in-pdf-forms/vue3js.md) - [Vanilla JS](https://surveyjs.io/pdf-generator/examples/how-to-customize-form-fields-in-pdf-forms/vanillajs.md)