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.

Try for Free Launch Demo

Check out the video below for more information about creating forms using the built-in UI.

License

You need the Form Creator component added to your 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 this button. You’ll be able to create, edit, or delete widget annotations when you’re in this mode.

Creation

Once you click 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.

• Date and datetime widget annotations — Creates a date or datetime widget annotation.

• Button widget annotations — Creates a button widget annotation.

You can create a widget annotation by clicking 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 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.

Rotation

You can rotate widget annotations in 90-degree angles in the following ways:

• With the toolbar buttons.

  

• With the Form Creator popover window.

  

Deletion

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

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