Popular Uses Cases for the WebViewer Form Builder

By Garry Klooesterman | 2025 Jun 26

5 min

Introduction

Copied to clipboard

Forms, in one “form” or another, have been around for thousands of years, dating back to Mesopotamia. There’s been a lot of changes and improvements from the clay tablets written in cuneiform, though, some forms today are probably just as hard to read.

Just as writing systems have advanced, so have forms. From early, basic paper-based receipts and invoices all the way to today’s digital, smart forms, there’s no denying that they have their place in any business.

Forms power today’s business workflows, from onboarding and contract signing to case management. With the Apryse WebViewer Form Builder, developers can embed powerful, accessible, and customizable form-building capabilities directly into their applications.

This blog will look at how the Apryse WebViewer Form Builder can be used to handle popular use cases for forms.

What is the WebViewer Form Builder?

Copied to clipboard

The WebViewer Form Builder allows you to add capabilities into your apps to easily build, edit, and preview form fields in real time within the form builder mode. The Apryse WebViewer UI is customizable, modular, and accessible, meeting accessibility standards like WCAG 2.2 AA and the European Accessibility Act. It provides features like keyboard navigation and screen reader support, ensuring an accessible experience for all users.

What are the features of the WebViewer Form Builder?

Copied to clipboard

Create and Modify Forms: Users can preview forms by hovering over the canvas and use a single click or drag-and-drop controls to create the form. Users can create new fields or modify existing ones.

Interactive Form Filling: Users have control over all form field properties, including text fields, checkboxes, radio buttons, dropdowns, and signatures.

Digital Signatures: Add secure digital form signing to streamline workflows with programmatic document signing. Users can ensure flexibility and compliance in their signing needs with support for simple e-signatures to advanced digital signatures, including those backed by certificate authorities.

Custom Form Fields: A customizable, flexible panel allows for adjusting of field properties such as dimensions, field options, and more in real-time. Fields can be edited individually or in batches.

WYSIWYG Editor: A true what-you-see-is-what-you-get experience for real-time editing and previewing of on-the-fly adjustments.

Accurate Display and Printing: Provides a consistent display of forms and signatures across devices and when printed.

Form Flattening: Flattening forms removes the fields by converting text and images in the PDF to regular objects, reducing the document size, and ensuring consistent formatting.

Common Business Use Cases for the WebViewer Form Builder

Copied to clipboard

The uses for a customizable and accessible form builder are many and vary from industry to industry. It could be used for everything from a basic invoice management system for a small business to a fully integrated patient tracking system. Here we’ll look at three areas:

Onboarding

With Form Builder, you can create apps that streamline the onboarding process by automating the submission of forms. You’re able to design custom, fillable PDFs specific to the needs of the business with a variety of options, from simple text fields to interactive radio and checkbox fields. Form Builder also helps ensure your forms adhere to company policies and regulations.

Contracts

Form Builder allows for the easy creation of various legally binding and tamper-proof contracts such as employee contracts, sales agreements, and more. Creating apps with fillable and signable forms allows businesses to streamline the onboarding or sales process with efficient contract management. Completed forms can then be automatically processed with the information passed to a database for later analysis.

Case Management

Forms are essential tools in building case management applications. In healthcare, for example, Form Builder allows you to build comprehensive patient intake and assessment forms that can be tailored to specific departments. Interactive forms with radio and checkbox fields can be built for specialized assessments, and Digital Signing can be added to patient consent forms. With Form Builder, you can ensure that your forms are compliant with regulations such as HIPAA and PIPEDA.

How do I get started with the WebViewer Form Builder?

Copied to clipboard

Getting started is easy. We’ll look at the basics of getting stated here but for full details, check out this guide.

Step 1: Choose your set up method

Copied to clipboard

Here, you’ll be able to choose your favorite set up method from NPM, manual, and even without the viewer. You’ll need to select from the libraries and frameworks like React, Angular and more, integrations such as Salesforce and Mendix, or even clone a project.

For this blog, we’ll continue with the NPM method.

Note: You should have already installed Node and npm.

Step 2: Get a trial key

Copied to clipboard

If you don’t already have one, you can get a trial key here, and bonus, it’s free!

Step 3: Install WebViewer

Copied to clipboard

To install WebViewer, you’ll need to open a command prompt and run the following command:

npm i @pdftron/webviewer

Step 4: Copy static assets

Copied to clipboard

Now we need to copy the static assets WebViewer needs to run into a public location that will be served via HTTP/HTTPS. While there’s a few ways to handle this, seen here, this example continues with the NPM method. So, we’ll need to add this code to the package.json file:

{
  "scripts": {
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer",
    "build": "mybuildscript && npm run move-static"
  }
}

Step 5: Specify file paths

Copied to clipboard

In your project code, use the path parameter to tell WebViewer where you copied the static files.

Note: Don’t forget to replace 'YOUR_LICENSE_KEY' with your own license key from step 2.

import WebViewer from '@pdftron/webviewer'

WebViewer({
  path: '/public/webviewer',
  licenseKey: 'YOUR_LICENSE_KEY',
}, document.getElementById('viewer'))
  .then(instance => {
    const { UI, Core } = instance;
    const { documentViewer, annotationManager, Tools, Annotations } = Core;
    // call methods from UI, Core, documentViewer and annotationManager as needed

    documentViewer.addEventListener('documentLoaded', () => {
      // call methods relating to the loaded document
    });

    instance.UI.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf');
  })

What’s next?

Copied to clipboard

That’s all there is to setting up WebViewer in its basic form. Now you’re ready to go forth and build custom form capabilities into your apps.

The following documentation is a great starting point to discover what you can do with the different form elements such as editing fields, text, signature, radio, checkbox fields, and more.

Conclusion

Copied to clipboard

Building powerful, customizable form capabilities into your apps gives your users the tools they need to manage all their form needs, regardless of how complex they are. Integrating the WebViewer Form Builder is straightforward and easy with the Apryse Form Builder SDK.

Feel free to check out our demo! You can also get started now or contact our sales team for any questions. You can also check out our Discord community for support and discussions.