ComPDFKit
Get TrialContact Sales
DemoFAQTechnical Support
Guides

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 for Web 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: "textfield",
  rect: {
    left: 102,
    top: 136,
    right: 161,
    bottom: 156
  },
  fieldName: "Text Field1",
  isHidden: 0,
  contents: 'test',
  backgroundColor: "#93B9FD",
  color: "#000000",
  fontName: "Helvetica",
  fontSize: 14,
  textAlignment: "left",
  isMultiLine: false,
  pageIndex: 0
})

Check Boxes ​

Check boxes could be created, customized, named, filled, downloaded, hidden, and deleted. Except for the field, ComPDFKit for Web 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: "checkbox",
  rect: {
    left: 110,
    top: 190,
    right: 130,
    bottom: 210
  },
  fieldName: "Check Box1",
  isHidden: 0,
  borderColor: "#43474D",
  backgroundColor: "#93B9FD",
  borderWidth: 1,
  borderStyle: "solid",
  checkStyle: 0,
  isChecked: 0,
  pageIndex: 0
})

Radio Button ​

Radio buttons could be created, customized, named, filled, downloaded, hidden, and deleted. Except for the field, ComPDFKit for Web 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: "radiobutton",
  rect: {
    left: 150,
    top: 190,
    right: 170,
    bottom: 210
  },
  fieldName: "Group1",
  isHidden: 0,
  borderColor: "#43474D",
  borderStyle: "solid",
  borderWidth: 1,
  backgroundColor: "#93B9FD",
  checkStyle: 1,
  isChecked: 0,
  pageIndex: 0
})

List Box ​

A list box could be created, customized, named, selected, downloaded, hidden, and deleted. Except for the field, ComPDFKit for Web 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: "listbox",
  rect: {
    left: 356,
    top: 176,
    right: 414,
    bottom: 203
  },
  borderColor: "#43474D",
  borderStyle: "solid",
  borderWidth: 1,
  fieldName: "List Box1",
  fontName: "Helvetica",
  fontSize: 14,
  isHidden: 0,
  items: [
    {
      Value: "Item1",
      String: "Item1"
    },
    {
      Value: "Item2",
      String: "Item2"
    }
  ],
  selected: 0,
  color: "#000000",
  backgroundColor: "#93B9FD",
  pageIndex: 0
})

Combo Box ​

Combo boxes could be created, customized, named, selected, downloaded, hidden, and deleted. Except for the field, ComPDFKit for Web 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: "combobox",
  rect: {
    left: 356,
    top: 176,
    right: 414,
    bottom: 203
  },
  borderColor: "#43474D",
  borderStyle: "solid",
  borderWidth: 1,
  fieldName: "Combo Box1",
  fontName: "Helvetica",
  fontSize: 14,
  isHidden: 0,
  items: [
    {
      Value: "Item1",
      String: "Item1"
    },
    {
      Value: "Item2",
      String: "Item2"
    }
  ],
  selected: 0,
  color: "#000000",
  backgroundColor: "#93B9FD",
  pageIndex: 0
})

Push Button ​

Push buttons could be created, customized, named, downloaded, hidden, and deleted. Except for the field, ComPDFKit for Web 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: "pushbutton",
  rect: {
    left: 356,
    top: 176,
    right: 414,
    bottom: 203
  },
  backgroundColor: "#93B9FD",
  borderColor: "#43474D",
  borderStyle: "solid",
  borderWidth: 1,
  fieldName: "Button1",
  fontName: "Helvetica",
  fontSize: 14,
  actionType: 1,
  isHidden: 0,
  color: "#000000",
  title: "OK",
  pageIndex: 0,
  destPage: 2
})
// Open a Web Link.
docViewer.addAnnotations({
  type: "pushbutton",
  rect: {
    left: 356,
    top: 176,
    right: 414,
    bottom: 203
  },
  backgroundColor: "#93B9FD",
  borderColor: "#43474D",
  borderStyle: "solid",
  borderWidth: 1,
  fieldName: "Button1",
  fontName: "Helvetica",
  fontSize: 14,
  isHidden: 0,
  color: "#000000",
  title: "OK",
  pageIndex: 0,
  actionType: 6,
  url: "http://example.com"
})