Form Designer: Create and edit PDF form fields using JavaScript

The Form Creator 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 NutrientViewer.Annotations.WidgetAnnotation({
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 100,
    top: 75,
    width: 200,
    height: 80
  }),
  id: NutrientViewer.generateInstantId() // <-- PSPDFKit generates the widget id for you
});
const formField = new NutrientViewer.FormFields.TextFormField({
  name: "MyFormField",
  annotationIds: NutrientViewer.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 Creator example, available in our public catalog demo.

Form Creator in action

Our Form Creator 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(opens in a new tab), as are the rest of our catalog examples.