This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/web/signatures/digital-signatures/signature-lifecycle/add-a-signature-field.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Add signature fields to PDFs using JavaScript | Nutrient

Add signature fields to PDFs using JavaScript

Markdown version of this page, suitable for AI agents and automation

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. Visible signature fields have a visual representation on a document, so users can see and interact with them. You can configure the signature appearance when you sign a document with Nutrient. For more information, refer to the configure the visual appearance of a digital signature guide.

Choose a visible signature field if you want a visual representation, or an invisible one to keep the field hidden from the document viewer. An invisible signature field is still a cryptographically valid signature.

With Nutrient Web SDK 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 NutrientViewer.Annotations.WidgetAnnotation({
  pageIndex: 0,
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 200,
    top: 300,
    width: 250,
    height: 150,
  }),
  formFieldName: "My signature form field",
  id: NutrientViewer.generateInstantId(),
});
const formField = new NutrientViewer.FormFields.SignatureFormField({
  name: "My signature form field",
  annotationIds: NutrientViewer.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 NutrientViewer.I18n.messages object.

The example below changes the label of the signature field in the English localization to initials. Preload the locale first if you change the message before loading the viewer:

await NutrientViewer.I18n.preloadLocalizationData("en");
NutrientViewer.I18n.messages.en = {
  ...NutrientViewer.I18n.messages.en,
  sign: "initials"
};

In TypeScript, locale keys on NutrientViewer.I18n.messages are optional in Nutrient Web SDK 1.22 and later. Guard the entry, or use a non-null assertion after preloading.