# Add signature fields to PDFs using JavaScript

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 Nutrient, you have the ability to configure the signature appearance (refer to our guide on how to [configure the visual appearance of a digital signature](https://www.nutrient.io/guides/web/signatures/digital-signatures/signature-lifecycle/configure-digital-signature-appearance.md) 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 Nutrient Web SDK and the Form Creator component, you can programmatically add new signature form fields to a document.

[Try for free](https://www.nutrient.io/sdk/web/getting-started/react-vite.md)

[Launch demo](https://www.nutrient.io/demo/add-signature-field)

The following example creates a signature form field:

```js

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 [`PSPDFKit.I18n.messages` object](https://www.nutrient.io/api/web/NutrientViewer.I18n.html#.messages).

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

```js

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

```
---

## Related pages

- [Creating self-signed certificates for digital signatures](/guides/web/signatures/digital-signatures/signature-lifecycle/prepare-the-certificates-for-signing.md)
- [Sign a PDF via Document Engine using JavaScript](/guides/web/signatures/digital-signatures/signature-lifecycle/sign-a-pdf-document-document-engine.md)
- [Configure digital signature appearance: Visible vs. non-visible Signatures](/guides/web/signatures/digital-signatures/signature-lifecycle/configure-digital-signature-appearance.md)
- [Sign a PDF via DWS Processor API using JavaScript](/guides/web/signatures/digital-signatures/signature-lifecycle/sign-a-pdf-document-dws.md)
- [Validating a digital signature using JavaScript](/guides/web/signatures/digital-signatures/signature-lifecycle/validation.md)
- [Implementing a secure digital signature lifecycle](/guides/web/signatures/digital-signatures/signature-lifecycle/signature-lifecycle-overview.md)
- [Sign a PDF with a certificate in a browser](/guides/web/signatures/digital-signatures/signature-lifecycle/sign-a-pdf-document.md)