How to add electronic signature fields in PDFs

PSPDFKit Server has been deprecated and replaced by Document Engine. To start using Document Engine, refer to the migration guide. With Document Engine, you’ll have access to robust new capabilities (read the blog for more information).

A signature field is a crucial component in PDF documents that contain a digital or electronic signature. It serves as a designated space where users can apply their signatures electronically. Signature fields can be either invisible or visible. Invisible signature fields aren’t visible on a document surface, while visible signature fields have a visual representation on a document, allowing users to see and interact with them. When signing a document with PSPDFKit, you have the ability to configure the signature appearance (see our guide on how to configure the visual appearance of a digital signature for more information).

The choice between a visible or invisible signature field depends on whether you want the signature field to have a visual representation or if you prefer for it to remain hidden from the document viewer. It’s important to note that an invisible signature field is still a cryptographically valid signature.

With PSPDFKit for Web and the Form Creator component, you can programmatically add new signature form fields to a document.

Try for Free Launch Demo

The following example creates a signature form field:

const widget = new PSPDFKit.Annotations.WidgetAnnotation({
  pageIndex: 0,
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 200,
    top: 300,
    width: 250,
    height: 150
  }),
  formFieldName: "My signature form field",
  id: PSPDFKit.generateInstantId()
});
const formField = new PSPDFKit.FormFields.SignatureFormField({
  name: "My signature form field",
  annotationIds: PSPDFKit.Immutable.List([widget.id])
});
instance.create([widget, formField]);

The signature form field created in the example above can then be used to add new signatures either programmatically or using the UI. If you want to create an invisible signature field, modify the boundingBox property to have a width and height of zero.

Customizing the Label of the Signature Field

By default, the label of the signature field in the English localization is sign. To customize the label of the signature field, change its localization entry in the PSPDFKit.I18n.messages object.

The example below changes the label of the signature field in the English localization to initials:

PSPDFKit.I18n.messages.en.sign = "initials";