Fill and sign PDF forms using JavaScript

Nutrient Web SDK allows you to fill and sign forms in a PDF document both programmatically and manually through the UI.

Try for Free Launch Demo

Filling in fields

For standard fields such as text boxes and radio buttons, you can set their values using the nutrientviewer.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 NutrientViewer.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. The following example shows how to do this:

// 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 NutrientViewer.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 NutrientViewer.Annotations.WidgetAnnotation &&
    annotation.formFieldName === field.name
);


// Make a new ink annotation.
//
const annotation = new NutrientViewer.Annotations.InkAnnotation({
  pageIndex: 0,
  lines: NutrientViewer.Immutable.List([
    NutrientViewer.Immutable.List([
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + 5,
        y: widget.boundingBox.top + 5
      }),
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + widget.boundingBox.width - 10,
        y: widget.boundingBox.top + widget.boundingBox.height - 10
      })
    ]),
    NutrientViewer.Immutable.List([
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + widget.boundingBox.width - 10,
        y: widget.boundingBox.top + 5
      }),
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + 5,
        y: widget.boundingBox.top + widget.boundingBox.height - 10
      })
    ])
  ]),
  boundingBox: widget.boundingBox,
  isSignature: true
});


instance.create(annotation);

Checking if a signature form field is signed

As signature form fields don’t have values, it may be tricky to find out what annotation, if any, is being used as a signature for a given signature form field.

Nutrient Web SDK considers a signature form field signed when an annotation overlaps it. To check if a given form field or an annotation is overlapped by any annotations, use the instance.getOverlappingAnnotations API.

There’s no direct connection between a signature and a form field beyond their positions. This method will return any annotation that overlaps the argument passed to the API.

// 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 NutrientViewer.FormFields.SignatureFormField
);


// Check if the signature form field has been signed
await instance.getOverlappingAnnotations(field);


// It will result in a list of annotations that overlaps the given signature form field.
// If no annotation overlaps the form field, the list will be empty.

This API can be used to check if any type of form fields or annotations are overlapped by one or multiple annotations:

const annotations = instance.getAnnotations(0);


const inkAnnotation = annotations.find(
  (annotation) =>
    annotation instanceof NutrientViewer.Annotation.InkAnnotation
);


await instance.getOverlappingAnnotations(inkAnnotation);