Form Creation

Since version 2019.5, PSPDFKit for Web has included support for creating and removing form fields from a document, provided the license includes the Form Designer feature.

Adding a Text Form Field

A form field is a model representation of a visual form in a document. To be able to create a form field, you have to first create the form element (also known as a widget annotation). This works the same as adding any other annotation, as can be seen in the Creating Annotations guide. For more information on the difference between a form field and a form element, please see Introduction to Forms.

If a widget annotation is created without a form field, it will be removed later if the associated form field is not created in the meantime. When the widget annotation has been added to the document at the correct page, you can call PSPDFKit.Instance#createFormField():

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Create a new text form field.
const widget = new PSPDFKit.Annotations.WidgetAnnotation({
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 100,
    top: 75,
    width: 200,
    height: 80
  })
);
instance.createAnnotation(widget)
  .then(annotation => {
    instance.createFormField(
      new PSPDFKit.FormFields.TextFormField({
        name: "MyFormField",
        annotationIds: new PSPDFKit.Immutable.List([annotation.id]),
        value: "Text shown in the form field"
      }
    )
  });

You can add any kind of form field to a document. For more information about the available form field types, check out the PSPDFKit.FormFields documentation.

Adding Radio Buttons and Checkboxes

PSPDFKit.FormFields.RadioButtonFormField and PSPDFKit.FormFields.CheckboxButtonFormField may use more than a single widget annotation to represent the different available form field values. The current form field value can be retrieved from PSPDFKit.FormFields.FormField#value for any form field type except for PSPDFKit.FormFields.SignatureFormField:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// Create two radio buttons and position them in the document.
// Note that both widget annotations have the same `formFieldName` value.
const radioWidget1 = new PSPDFKit.Annotations.WidgetAnnotation({
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 100,
    top: 100,
    width: 20,
    height: 20
  })
});
const radioWidget2 = new PSPDFKit.Annotations.WidgetAnnotation({
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 130,
    top: 100,
    width: 20,
    height: 20
  })
});
Promise.all([
  instance.createAnnotation(radioWidget1),
  instance.createAnnotation(radioWidget2)
]).then(([{ id: radioWidget1Id }, { id: radioWidget2Id }]) => {
  instance.createFormField(
    new PSPDFKit.FormFields.RadioButtonFormField({
      name: "MyFormField",
      annotationIds: new PSPDFKit.Immutable.List([
        radioWidget1Id,
        radioWidget2Id
      ]),
      options: new PSPDFKit.Immutable.List([
        new PSPDFKit.FormOption({
          label: "Option 1",
          value: "1"
        }),
        new PSPDFKit.FormOption({
          label: "Option 2",
          value: "2"
        })
      ]),
      defaultValue: "1"
    })
  );
});

Removing Form Fields and Form Elements

You can easily remove any form field from a document using PSPDFKit.Instance#deleteFormField(). This call will also remove the associated widget annotations.