Add Signature Fields to PDFs Using JavaScript

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

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.

You can find out more about Electronic Signatures and Digital Signatures in the corresponding guides.

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";