Customize PDF Forms

PDF form customization enables you to tailor the layout and design of your PDF documents to specific requirements, allowing you to create professional-looking PDF forms that reinforce your brand. This example demonstrates how to customize a PDF form: use custom fonts, add a form header, and change the appearance of form fields. To download the customized PDF form, scroll the survey down to the bottom and click the "Save as PDF" button.

Any PDF document supports a set of standard 14 fonts. They are available in most PDF viewers and ensure consistent document representation on any device. SurveyJS PDF Generator also enables you to use custom fonts in your PDF document. Unlike the standard fonts, custom fonts are embedded in the document and increase its size. In this demo, a generated PDF form use a custom Roboto font. For more information on how to apply different fonts in a PDF document, refer to the following demo:

Change Font in a PDF Form

A form header usually includes the document title, annotations, page numbers, brand logo, and other information. This demo uses the onRenderHeader event to add a company logo to the header and colorize the page title and a line under it. View the following demo for details on how to configure the form header:

Add Header and Footer to a PDF Document

To successfully implement form field customization, you first need to understand the structure of a PDF document. Each element in a PDF form consists of PDF bricks—small building blocks that specify what and where to render on a PDF page. To customize form fields, you need to modify their PDF bricks within the onRenderQuestion event. Its options.bricks parameter provides access to an array of bricks that correspond to an individual form field. Log this parameter to the browser's console or set a debugger within the event handler and examine the bricks array to identify the brick you need to customize. In this demo, the onRenderQuestion event is used to colorize form field titles and draw a line under each form field.

In addition to the onRenderQuestion event, you can customize form fields by redefining constants. While onRenderQuestion allows you to customize each form field individually, the constants apply to all form fields at once. To find constants that change the form field appearance, refer to the SurveyHelper and FlatQuestion classes in the source code. View the demo code listing for information on the constants used in this example.

Customize Survey Questions in PDF