Forms

A PDF document may contain any number of form fields that allow a user to enter information on a PDF page. An interactive form (sometimes referred to as an AcroForm) is a collection of fields for gathering information interactively from the user. Under the hood, PDF form fields are a type of PDF annotation called widget annotations.

ComPDFKit Web Viewer is a JavaScript library that fully supports reading, filling, creating, and editing PDF forms and provides utility methods to make working with forms simple and efficient.

Supported Form Fields

ComPDFKit Web Viewer now supports the form fields below by the PDF specification.

Text Fields: It is a box or space for text fill-in data typically entered from a keyboard. The text may be set to a single line or multiple lines.
Check Boxes: Check boxes could represent one or more checkboxes that can be checked or unchecked.
Radio Button: Select one option from the predefined options.
List Box: Select one or more options from the predefined options, similar to the Combo Box.
Combo Box: Select one option from a drop-down list of available text options.
Push Button: Create custom buttons on the PDF document that will perform an action when pressed.
Signatures: Allow users to add electronic signatures to PDF documents.

More supported form fields are coming soon. Please contact us if you have other form field requirements.

Create & Edit Form Fields

Creating form fields works the same as adding any other annotation, as can be seen in the guides for programmatically creating annotations. But you need to change the annotation type to the corresponding form fields, such as text-field or check-box.

Text Fields
Text fields could be created, customized, named, filled, downloaded, hidden, and deleted. Except for the field, ComPDFKit Web Viewer provides options to change the text color, background color, font, single/multiple lines, and alignment of the text in the text field. Here is the sample code below to set edit a text field.
javascript
```
docViewer.addAnnotations({
  type: "text-field",
  format: "0",
  rect: "221.40,538,363.40,626",
  fieldName: "Text Field1",
  isHidden: "0",
  backgroundColor: "#93B9FD",
  textColor: "#000000",
  fontName: "Helvetica",
  fontSize: "14",
  alignment: "0",
  multiline: false,
  page: 1
})
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Check Boxes
Check boxes could be created, customized, named, filled, downloaded, hidden, and deleted. Except for the field, ComPDFKit Web Viewer provides options to set the shape of the marker that appears inside the check box including check, circle, cross, diamond, square, or star. Here is the sample code below to set edit a check box.
javascript
```
docViewer.addAnnotations({
  type: "check-box",
  rect: "325.40,392,351.40,419",
  fieldName: "Check Box1",
  isHidden: "0",
  borderColor: "#43474D",
  backgroundColor: "#93B9FD",
  lineWidth: "3",
  style: "0",
  select: "0",
  page: 1
})
```
1
2
3
4
5
6
7
8
9
10
11
12
Radio Button
Radio buttons could be created, customized, named, filled, downloaded, hidden, and deleted. Except for the field, ComPDFKit Web Viewer provides options to set the shape of the marker that appears inside the radio button including check, circle, cross, diamond, square, or star. Here is the sample code below to edit a radio button.
javascript
```
docViewer.addAnnotations({
  type: "radio-button",
  rect: "325.40,392,351.40,419",
  fieldName: "Group1",
  isHidden: "0",
  borderColor: "#43474D",
  backgroundColor: "#93B9FD",
  lineWidth: "3",
  style: "0",
  select: "0",
  page: 1
})
```
1
2
3
4
5
6
7
8
9
10
11
12

List Box

A list box could be created, customized, named, selected, downloaded, hidden, and deleted. Except for the field, ComPDFKit Web Viewer provides options to change the text color, background color, and font in the list box. Here is the sample code below to edit a list box.

javascript

docViewer.addAnnotations({
  type: "list-box",
  rect: "239,638,310,666",
  fieldName: "List Box1",
  fontName: "Helvetica",
  fontSize: "14",
  isHidden: "0",
  options: "Item 1,Item 2",
  select: "1",
  textColor: "#000000",
  backgroundColor: "#93B9FD",
  page: 1
})

Combo Box

Combo boxes could be created, customized, named, selected, downloaded, hidden, and deleted. Except for the field, ComPDFKit Web Viewer provides options to change the text color, background color, and font in the combo box. Here is the sample code below to edit a combo box.

javascript

docViewer.addAnnotations({
  type: "combo-box",
  rect: "109,654,162,672",
  fieldName: "Combo Box1",
  fontName: "Helvetica",
  fontSize: "14",
  isHidden: "0",
  options: "Item 1,Item 2",
  select: "1",
  textColor: "#000000",
  backgroundColor: "#93B9FD",
  page: 1
})

Push Button

Push buttons could be created, customized, named, downloaded, hidden, and deleted. Except for the field, ComPDFKit Web Viewer provides options to change the text color, background color, and font in the push button or set an action to go to the page or open a web link. Here is the sample code below to edit a push button.

javascript

// Go To Pages
docViewer.addAnnotations({
  type: "push-button",
  rect: "334,648,407,678",
  fieldName: "Button1",
  fontName: "Helvetica",
  fontSize: "14",
  format: "0",
  isHidden: "0",
  textColor: "#000000",
  backgroundColor: "#93B9FD",
  value: "OK",
  page: 1,
  actionType: "1",
  destPage: "2"
})
// Open a Web Link
docViewer.addAnnotations({
  type: "push-button",
  rect: "334,648,407,678",
  fieldName: "Button1",
  fontName: "Helvetica",
  fontSize: "14",
  format: "0",
  isHidden: "0",
  textColor: "#000000",
  backgroundColor: "#93B9FD",
  value: "OK",
  page: 1,
  actionType: "2",
  url: "http://example.com"
})

Fill Form Fields

ComPDFKit Web Viewer supports the AcroForm standard and provides a simple UI to fill out each form element. Click the corresponding form field and then fill in text or select options using either the onscreen keyboard or an attached hardware keyboard. Then click any blank area on the page to deselect the form element, which will commit the changes.

Signatures

It's a legal way to get consent or approval on electronic documents or forms. With Signatures, you can sign any PDF digital document conveniently and reliably without printing. Various types of signatures are supported.

Electronic Signatures

Electronic signatures could be seen as the evidence of the document signatory's agreement, and let you easily and securely sign documents with your signature. You can choose from three different ways to create your signature: draw it with a trackpad or mouse, type it with your preferred font style, or upload a photo of your handwritten signature. You can also customize the color and stroke width of your signature to make it look more authentic.

Drawn

Drawn signatures let you create your signature with a trackpad or mouse. You can draw your signature as if you were using a pen or a pencil, and adjust the color and stroke width as you like. Drawn signatures are ideal for creating natural and personal signatures that match your handwriting style.

Image

Image signatures let you upload a photo of your handwritten signature and use it to sign PDF documents. Image signatures are perfect for using your existing signature without having to redraw it every time.

Typed

Typed signatures let you type your name and choose a font style that suits you. You can select from a variety of fonts that mimic handwriting, and change the color and stroke width as well. Typed signatures are convenient and fast for creating simple and elegant signatures that look professional.

Forms ​

Supported Form Fields ​

Create & Edit Form Fields ​

Fill Form Fields ​

Signatures ​

Electronic Signatures ​

Forms

Supported Form Fields

Create & Edit Form Fields

Fill Form Fields

Signatures

Electronic Signatures