Guides
Create Interactive Forms in PDF

This sample shows how to print form list information, set up interactive forms (including Text Field, Check Box, Radio Button, Push Button, List Box and Combo Button), and fill out form information
javascript
// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // Sample: Create forms
    CreateForms(docViewer);
  })
})

function CreateForms(docViewer) {
  CreateTextField(docViewer);
  CreatCheckBox(docViewer);
  CreateRadioButton(docViewer);
  CreateListBox(docViewer);
  CreateComboBox(docViewer);
  CreatePushButton(docViewer);
}

// Create Text Field
function CreateTextField(docViewer) {
  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
  });
}

// Create Check Box
function CreatCheckBox(docViewer) {
  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
  });
}

// Create Radio Button
function CreateRadioButton(docViewer) {
  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
  });
}

// Create List Box
function CreateListBox(docViewer) {
  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
  });
}

// Create Combo Box
function CreateComboBox(docViewer) {
  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
  });
}

// Create Push Button
function CreatePushButton(docViewer) {
  // 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"
  });
}
Create Interactive Forms in PDF ​

Create Interactive Forms in PDF
