Fill and Sign PDF Forms Using JavaScript

PSPDFKit for Web allows you to fill and sign forms in a PDF document both programmatically and manually through the UI.

Filling In Fields

For standard fields such as text boxes and radio buttons, you can set their values using the pspdfkit.instance#setFormFieldValues method.

In the example below, the value of all text fields is updated:

const formFields = await instance.getFormFields();

// Update the value of all text form fields.
const updatedFormFieldValues = formFields
  .filter(
    (formField) =>
      formField instanceof PSPDFKit.FormFields.TextFormField
  )
  .reduce((o, formField) => (o[formField.name] = "New Value"), {});

instance.setFormFieldValues(updatedFormFieldValues);

Signing

When a user clicks on an unsigned signature form field, the signature UI pops up, allowing them to create an ink, image, or typed signature. Once this is created, it’s overlaid and fit in the same location as the signature field.

It’s possible to do this programmatically by creating and positioning the ink annotation yourself. The following example shows how to do this:

// The name of the field you want.
//
const formFieldName = "signature";

// First get all `FormFields` in the `Document`.
//
const formFields = await instance.getFormFields();

// Get a signature form with the specific name you want.
//
const field = formFields.find(
  (formField) =>
    formField.name === formFieldName &&
    formField instanceof PSPDFKit.FormFields.SignatureFormField
);

// In this example, assume the widget you need is on the first page.
//
const annotations = await instance.getAnnotations(0);

// Find that widget.
//
const widget = annotations.find(
  (annotation) =>
    annotation instanceof PSPDFKit.Annotations.WidgetAnnotation &&
    annotation.formFieldName === field.name
);

// Make a new ink annotation.
//
const annotation = new PSPDFKit.Annotations.InkAnnotation({
  pageIndex: 0,
  lines: PSPDFKit.Immutable.List([
    PSPDFKit.Immutable.List([
      new PSPDFKit.Geometry.DrawingPoint({
        x: widget.boundingBox.left + 5,
        y: widget.boundingBox.top + 5
      }),
      new PSPDFKit.Geometry.DrawingPoint({
        x: widget.boundingBox.left + widget.boundingBox.width - 10,
        y: widget.boundingBox.top + widget.boundingBox.height - 10
      })
    ]),
    PSPDFKit.Immutable.List([
      new PSPDFKit.Geometry.DrawingPoint({
        x: widget.boundingBox.left + widget.boundingBox.width - 10,
        y: widget.boundingBox.top + 5
      }),
      new PSPDFKit.Geometry.DrawingPoint({
        x: widget.boundingBox.left + 5,
        y: widget.boundingBox.top + widget.boundingBox.height - 10
      })
    ])
  ]),
  boundingBox: widget.boundingBox,
  isSignature: true
});

instance.create(annotation);

Checking if a Signature Form Field Is Signed

As signature form fields don’t have values, it may be tricky to find out what annotation, if any, is being used as a signature for a given signature form field.

PSPDFKit considers a signature form field signed when an annotation overlaps it. To check if a given form field or an annotation is overlapped by any annotations, use the instance.getOverlappingAnnotations API.

There’s no direct connection between a signature and a form field beyond their positions. This method will return any annotation that overlaps the argument passed to the API.

// The name of the field you want.
const formFieldName = "signature";

// First get all `FormFields` in the `Document`.
const formFields = await instance.getFormFields();

// Get a signature form with the specific name you want.
const field = formFields.find(
  (formField) =>
    formField.name === formFieldName &&
    formField instanceof PSPDFKit.FormFields.SignatureFormField
);

// Check if the signature form field has been signed
await instance.getOverlappingAnnotations(field);

// It will result in a list of annotations that overlaps the given signature form field.
// If no annotation overlaps the form field, the list will be empty.

This API can be used to check if any type of form fields or annotations are overlapped by one or multiple annotations:

const annotations = instance.getAnnotations(0);

const inkAnnotation = annotations.find(
  (annotation) =>
    annotation instanceof PSPDFKit.Annotation.InkAnnotation
);

await instance.getOverlappingAnnotations(inkAnnotation);