PDF Form Build Showcase Demo Code Sample

Requirements

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: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

License Key

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

PDF Form Build Showcase Demo Code Sample

License Key