How to Create a Fillable Form in WebViewer

Summary: Forms are an effective way of gathering data, but dealing with them can be frustrating. Fillable forms allow businesses to gather data in a way that is easy and convenient for the user. The Form Builder SDK offers developers a powerful toolkit to integrate form creation, filling, and editing capabilities directly into their applications. This blog discusses the Apryse Form Builder SDK, including benefits, use cases, and how to get started.

Forms have been around for a long time, and it’s clear they aren’t going anywhere anytime soon. They are an effective tool for collecting data in a consistent way, but dealing with them can be frustrating with traditional methods. This often leads to users printing, completing, signing, and then scanning the form before sending it off.

The answer to this problem is fillable forms, which allow businesses to collect data in a way that is easy and convenient for the user. With the Apryse Form Builder SDK, you can embed pure client-side, dynamic form creation and interaction right into your application using WebViewer.

The SDK leverages the advantages of the PDF format such as vendor-independence, robust form elements (known as AcroForms), digital signatures, and encryption, and makes them practical and user-friendly. For developers, this means the ability to programmatically set and read field values, ensuring complete control over the form experience.

You can also use Smart Data Extraction Form Field Detection to identify fields in documents for you. Read more! 

Embed Digital Signatures: Supports both simple e-signatures and advanced digital signatures backed by certificate authorities for full flexibility and compliance.

WYSIWYG Editing: Offers a true "what-you-see-is-what-you-get" experience with real-time editing and previews for pixel-perfect form design.

Form Flattening: Programmatically remove fields, converting field data and appearances into static text/images. This reduces document size and ensures consistent display and printing.

Cross-Platform Support: The SDK is compatible with web and mobile platforms, allowing users to interact with forms on any device.

Complete Field Support: Supports all standard AcroForm field types such as text fields, checkboxes, radio buttons, signature fields, and more.

Now let’s look at some examples where the Form Builder SDK can be used to create fillable PDF forms.

Client/Employee Onboarding: Automate form submission and validation to accelerate the process and ensure policy and regulatory compliance.

Contracts & Sales: Integrate digital signature fields for faster application processing and to ensure documents are legally binding and tamper-proof.

Case Management: Build applications that deliver a robust audit trail and workflow continuity by making form filling and secure signing central to the process.

Regulatory Compliance: Guarantee document consistency and accessibility, such as WCAG 2.2 AA compliance, across all devices and when printing.

Integrating form building and editing into your application uses WebViewer and its JavaScript APIs. This is where you can programmatically create and manipulate form elements. For this blog, we’ll look at setting up the WebViewer SDK but know that it is also available using the Server SDK and Mobile SDK.

To get started, follow this documentation.

Note: You’ll need an Apryse trial key, and you can get one during set up.

Now that WebViewer is set up, let’s look at creating new PDF form fields.

Note: For examples of other tasks, such as modifying and removing form fields, see the documentation.

In an interactive PDF form, there are 2 main parts to a field element:

Field: This holds the actual data such as the field name, default value, and flags like required or multiline.

Widget annotation: This is the information that specifies the visual appearance of the field and defines the position, size, and look of the field on a specific page. A single field can have multiple widget annotations across a document.

For this blog, we’ll create a new text field and widget annotation. For other types of fields you can create, see the documentation.

We’ll add a text field and text widget annotation using this code:

And that’s it. We’ve added a text field and text widget annotation to a document using code.

Let’s break down this code sample and take a look at what’s happening. There are 3 main things happening in this code:

For a quicker way to set up fields, you can also do it directly in the WebViewer UI. Check out the demo! 

What is a Form Builder SDK?

A Form Builder SDK is a software development toolkit that allows developers to integrate form creation, editing, and filling functionalities directly into their applications.

What is an AcroForm?

An AcroForm (or interactive form) is a document with a collection of fields such as text boxes, checkboxes, radio buttons, and more, designed to gather information from a user.

How can I guarantee form consistency across all platforms?

You can use the Form Flattening feature. Flattening converts the interactive field elements into static text and images within the PDF, ensuring it appears the same on all devices and when printed.

How are form fields and widget annotations related in the code?

A field holds the data and properties such as name, value, and flags, of the form element. A widget annotation defines the visual appearance such as the position, size, and page number of that field. You must create both the field and the widget annotation programmatically for the interactive form element to be displayed.

We’ve just looked at how quick and easy it is to create a fillable form from a PDF using the Apryse Form Builder SDK. The SDK provides developers with the essential tools to deliver an efficient and compliant form experience. With granular control over the PDF object model and a complete, feature-rich editing UI, you can transform frustrating paper-based workflows into seamless, integrated digital solutions.

Ready to enhance your application's data capture capabilities? You can start by checking out our demo or starting a free trial.

Contact our sales team for any questions or jump on Discord for support and discussions.