PDF Form Build Showcase Demo Code Sample

Quickly enhance an existing PDF template by adding form fields. Start by placing your own fields as annotations, then convert them into interactive form fields. Choose from a variety of field types—including text boxes, signatures, checkboxes, and more—to build a fully functional PDF form.

This demo allows you to:

  • Upload your own PDF file
  • Add and customize form fields
  • Edit the layout and content
  • Download the updated PDF

Implementation steps
To add form fields to a PDF with WebViewer:

Step 1: Choose your preferred web stack
Step 2: Download any required modules listed in the Demo Dependencies section below
Step 3: Add the ES6 JavaScript sample code provided in this guide

Demo Dependencies

This sample uses the following:

Want to see a live version of this demo?

Try the PDF Form Build demo

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0 - GPT-4o model - July 20, 2025
3// File: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7// Customize the WebViewer UI
8const customizeUI = (instance) => {
9 const { UI } = instance;
10
11 // Enable Measurement tab
12 UI.enableFeatures([UI.Feature.Measurement]);
13
14 // Set the toolbar group to the forms tools
15 UI.setToolbarGroup('toolbarGroup-Forms');
16 UI.setToolMode(instance.Core.Tools.ToolNames.TEXT_FORM_FIELD);
17
18 // Download button
19 const downloadButton = new UI.Components.CustomButton({
20 dataElement: 'downloadPdfButton',
21 className: 'custom-button-class',
22 label: 'Download',
23 onClick: () => download(instance), // Download with annotations
24 style: {
25 padding: '10px 20px',
26 backgroundColor: 'blue',
27 color: 'white',
28 }
29 });
30
31 const defaultHeader = UI.getModularHeader('default-top-header');
32 defaultHeader.setItems([...defaultHeader.items, downloadButton]);
33};
34
35// Download the PDF
36const download = async (instance) => {
37
38 // Set the options for downloading the PDF
39 const options = {
40 flags: instance.Core.SaveOptions.LINEARIZED,
41 downloadType: 'pdf'
42 };
43
44 instance.UI.downloadPdf(options);
45};
46
47WebViewer(
48 {
49 path: '/lib',
50 initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/arrest-warrant-signed.pdf',
51 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
52 licenseKey: 'YOUR_LICENSE_KEY',
53 },
54 document.getElementById('viewer')
55).then((instance) => {
56
57 // customize WebViewer UI
58 customizeUI(instance);
59
60 console.log('✅ WebViewer loaded successfully.');
61}).catch((error) => {
62 console.error('❌ Failed to initialize WebViewer:', error);
63});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales