Syncfusion AI Assistant

How can I help you?

Create PDF Form Fields in Vue

4 Feb 202624 minutes to read

You can create or add new form fields either visually using the Form Designer UI or dynamically using APIs.

Create Form Fields Using the Form Designer UI

Use this approach when you want to design forms manually without writing code.

Steps:

  1. Enable Form Designer mode in the PDF Viewer.
  2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
  3. Click on the PDF page to place the form field.
  4. Move or resize the field as required.
  5. Configure field properties using the Properties panel.

Adding a form field using the Form Designer UI

Add Form Fields Programmatically (API)

Use this approach when you want to generate form fields dynamically based on data or application logic.

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Text Box using addFormField
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'First Name',
        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
        pageNumber: 1,
        isRequired: true,
        tooltip: 'Enter your first name'
      });
    },
  },
};
</script>

Use programmatic creation when:

  • Building dynamic forms
  • Pre-filling forms from databases
  • Automating form creation workflows

PDF Form Field Types and How to Add Them

Each field can be added via the Form Designer or programmatically.

Textbox

Add via Toolbar (UI)

  • Open Form Designer → select Textbox → click on the page → configure in Properties.
    Textbox properties panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Text Box using addFormField
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'FirstName',
        pageNumber: 1,
        bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
        isRequired: true,
        tooltip: 'Enter your first name',
        maxLength: 40
      });
    },
  },
};
</script>

Password

Add via Toolbar (UI)

  • Select Password → place it → configure tooltip, required, max length.
    Password Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Password Field
      pdfviewer.formDesignerModule.addFormField('Password', {
        name: 'AccountPassword',
        pageNumber: 1,
        bounds: { X: 100, Y: 190, Width: 200, Height: 24 },
        isRequired: true,
        maxLength: 32,
        tooltip: 'Enter a secure password',
      });
    },
  },
};
</script>

CheckBox

Add via Toolbar (UI)

  • Select CheckBox → click to place → duplicate for options → set isChecked, tooltip, appearance.
    CheckBox Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add CheckBox Field
      pdfviewer.formDesignerModule.addFormField('CheckBox', {
        name: 'AgreeTerms',
        pageNumber: 1,
        bounds: { X: 100, Y: 230, Width: 18, Height: 18 },
        isChecked: false,
        tooltip: 'I agree to the terms',
      });
    },
  },
};
</script>

RadioButton

Add via Toolbar (UI)

  • Select RadioButton → place buttons with the same Name to group → configure selection/colors.
    Radio Button Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Radio Buttons
      pdfviewer.formDesignerModule.addFormField('RadioButton', {
        name: 'Gender',
        value: 'Male',
        pageNumber: 0,
        bounds: { X: 100, Y: 270, Width: 16, Height: 16 }
      });
      pdfviewer.formDesignerModule.addFormField('RadioButton', {
        name: 'Gender',
        value: 'Female',
        pageNumber: 0,
        bounds: { X: 160, Y: 270, Width: 16, Height: 16 }
      });
    },
  },
};
</script>

ListBox

Add via Toolbar (UI)

  • Select ListBox → place → add items in Properties.
    ListBox Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const option = [
        { itemName: 'Item 1', itemValue: 'item1' },
        { itemName: 'Item 2', itemValue: 'item2' },
        { itemName: 'Item 3', itemValue: 'item3' }
      ];
      pdfviewer.formDesignerModule.addFormField('ListBox', {
        name: 'States',
        pageNumber: 1,
        bounds: { X: 100, Y: 310, Width: 220, Height: 70 },
        options: option,
      });
    },
  },
};
</script>

Add via Toolbar (UI)

  • Select DropDown → place → add items → set default value.
    DropDown Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const options = [
        { itemName: 'Item 1', itemValue: 'item1' },
        { itemName: 'Item 2', itemValue: 'item2' },
        { itemName: 'Item 3', itemValue: 'item3' },
      ];
      pdfviewer.formDesignerModule.addFormField('DropDown', {
        name: 'Country',
        options,
        bounds: { X: 560, Y: 320, Width: 150, Height: 24 },
      });
    },
  },
};
</script>

Signature Field

Add via Toolbar (UI)

  • Select Signature Field → place where signing is required → configure indicator text, thickness, tooltip, required.
    Signature Field

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Signature Field
      pdfviewer.formDesignerModule.addFormField('SignatureField', {
        name: 'Sign',
        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
        tooltip: 'sign Here',
        isRequired: true,
      });
    },
  },
};
</script>

Initial Field

Add via Toolbar (UI)

  • Select Initial Field → place where initials are needed → configure text and required state.
    Initial field Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Initial Field
      pdfviewer.formDesignerModule.addFormField('InitialField', {
        name: 'Sign',
        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
        tooltip: 'sign Here',
        isRequired: true,
      });
    },
  },
};
</script>

Add Fields Dynamically with setFormFieldMode

Use setFormFieldMode() to add fields on the fly based on user actions.

Edit Form Fields in TypeScript PDF Viewer

You can edit form fields using the UI or API.

Edit Using the UI

  • Right click a field → Properties to update settings. (Image here)
  • Drag to move; use handles to resize.
  • Use the toolbar to toggle field mode or add new fields.

Edit Programmatically

<template>
  <div>
    <button @click="editTextbox">EditTextBox</button>
    <button @click="addPasswordField">Add Form Field</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editTextbox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Retrieve form fields collection
      const fields = pdfviewer.retrieveFormFields();
      // Find the textbox field by name (Here field name is First Name)
      const field = fields.find(f => f.name === 'First Name') || fields[0];
      if (field) {
        // Update textbox field styling and value
        pdfviewer.formDesignerModule.updateFormField(field, {
          value: 'John',
          fontFamily: 'Courier',
          fontSize: 12,
          fontStyle: 'None',
          color: 'black',
          backgroundColor: 'white',
          borderColor: 'black',
          thickness: 2,
          alignment: 'Left',
          maxLength: 50
        });
      }
    },
    addPasswordField() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      if (pdfviewer) {
        pdfviewer.formDesignerModule.setFormFieldMode('Password');
      }
    }
  },
};
</script>

View Sample on GitHub

See Also