Form Designer: Create and Edit PDF Form Fields Using JavaScript

The Form Designer feature enables the creation, modification, and removal of form fields and their associated widgets. By means of the same API used for annotations, programmatically creating your own forms becomes very easy — just make sure you pass the widget annotation id in the form field’s annotationIds property, and create both in the same call to Instance#create:

const widget = new PSPDFKit.Annotations.WidgetAnnotation({
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 100,
    top: 75,
    width: 200,
    height: 80
  }),
  id: PSPDFKit.generateInstantId() // <-- PSPDFKit generates the widget id for you
});
const formField = new PSPDFKit.FormFields.TextFormField({
  name: "MyFormField",
  annotationIds: new PSPDFKit.Immutable.List([widget.id]), // <-- The generated widget id is passed to the associated form field
  value: "Text shown in the form field"
});
instance.create([widget, formField]);

If you want to provide your users with a UI to perform such operations, you can use and learn from our public Form Designer example, available in our public catalog demo.

Form Designer in Action

Our Form Designer example showcases the use of our API to build a rich, full featured form editor that includes drag-and-drop features, along with an interface to modify widget and form field properties in real time.

The source code for the example is available for you to clone and play with in our public repository, as are the rest of our catalog examples.