Create new form fields and widget annotations using Javascript

Form fields also known as AcroForms are a collection of fields such as text boxes, checkboxes, radio buttons, drop-down lists, pushbuttons, and more that will gather information interactively from the user.

One of the important ideas to understand is the appearance or display of a form field is independent of the field itself and exists as a widget annotation. There can be one field to many widget annotations. This gives the freedom to present the forms appearance over multiple pages or even multiple times on the same page of a document.

The form building capability is available through the programmatic API. The online form builder demo shows how to use this API to develop forms using a custom UI.

The basic steps are to create rectangle annotations in the document which enables a user to interact with positioning and sizing edits. Then after repositioning and resizing, you convert the rectangle annotations into fields and widget annotations.

You'll also want to make sure that you add the annotation or field after the document has been loaded. For example to add it immediately after the document loads use the documentLoaded event:

// config.js
const { documentViewer, annotationManager, Annotations } = instance.Core;

documentViewer.addEventListener('documentLoaded', () => {
  // create field and widget annotations here
});

Create fillable PDF forms
Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

Creating text field and text widget annotation
To create a text field and text widget annotation.

Creating signature field and signature widget annotation
To create a signature field and signature widget annotations.

Creating checkbox field and checkbox widget annotation
To create a checkbox field and checkbox widget annotations.

Creating radio field and radio widget annotation
To create a radio field and radio widget annotations.

Creating combo box field and choice widget annotation
To create a combo box field and choice widget annotations.

Creating list box field and list widget annotation
To create a list box field and list widget annotations.

Widgets flags can be set to define the property of the form field. See examples above for more details.

const widgetFlags = new Annotations.WidgetFlags();
widgetFlags.set('Required', true);