JavaScript PDF Form Creator

Starting with PSPDFKit for Web 2022.3, the advanced JavaScript PDF Form Creator (formerly Form Designer) was updated to include a built-in UI. This new UI allows you to create, edit, and remove widget annotations.

License

You need the Form Designer license to use the features and APIs mentioned in this guide.

Form Creator UI

The next sections outline the different steps required to enable Form Creator in the main toolbar and detail how you can use it to create, edit, and delete widget annotations.

Main Toolbar

To enable form creation using the toolbar, you have to add the form creator button to the toolbar, as it isn’t available in the toolbar by default:

PSPDFKit.load({
  ...baseOptions,
  toolbarItems: [
    ...PSPDFKit.defaultToolbarItems,
    {
      type: "form-creator"
    }
  ]
});

You can also add it after the PDF document has been loaded:

instance.setToolbarItems((items) => [
  ...items,
  { type: "form-creator" }
]);

The PSPDFKit.InteractionMode.FORM_CREATOR mode is activated once you click on this button. You’ll be able to create, edit, or delete widget annotations when you’re in this mode.

Creation

Once you click on the form creator button in the main toolbar, you can see the secondary toolbar. This toolbar contains the following buttons:

  • Text widget annotations— Creates a text widget annotation.

  • Checkbox widget annotations — Creates a checkbox widget annotation.

  • Radio Button widget annotations — Creates a radio button widget annotation.

  • Signature widget annotations — Creates a signature widget annotation.

  • List widget annotations — Creates a list widget annotation.

  • Combo Box widget annotations — Creates a combo box widget annotation.

  • Button widget annotations — Creates a button widget annotation.

You can create a widget annotation by clicking on the button and then clicking on the page. The widget annotation will be created on the page where you clicked and created with the default settings. You can use PSPDFKit.Configuration#onWidgetAnnotationCreationStart or PSPDFKit.Instance#setOnWidgetAnnotationCreationStart to change the default properties with which the form field is created.

Editing

You can edit a widget annotation by clicking on it. The widget annotation will be selected, and a popover to change the widget and form field properties will be shown. You’ll be able to see the changes in real time, but those changes will only be saved once you close the popover.

Deletion

You can delete a widget annotation by clicking on it and then clicking on the delete button. You can also press the delete button on your keyboard to delete the widget annotation.

Head over to our Form Creator demo to play with the built-in UI and see it in action.