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. This example shows how to do so:

// 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);

We use cookies to improve your experience and for marketing. Learn more in our privacy policy.