Some test text!

menu
Create form fieldskeyboard_arrow_down

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.

linkProgrammatically

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:

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('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.

linkExamples

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.

linkForm field properties

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);

linkWidget flags

Available widget flags are:

  • ReadOnly
  • Required
  • NoExport
  • Multiline
  • Password
  • NoToggleToOff
  • Radio
  • PushButton
  • Combo
  • Edit
  • DoNotScroll
  • RadiosInUnison

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close