HelpBot Assistant

How can I help you?

Form designer in JavaScript PDF Viewer

12 Feb 20266 minutes to read

When Form Designer mode is enabled in the Syncfusion JavaScript PDF Viewer, a default Form Designer user interface (UI) is displayed. This UI includes a built-in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop-down lists, list boxes, and signature and initial fields.

Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.

Key features

Add Form Fields
You can add the following form fields to the PDF:

Edit Form Fields
You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.

Set Field Properties
You can configure field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read only state.

Control Field Behavior
You can enable or disable read only mode, show or hide fields, and control whether fields appear when printing the document.

Manage Form Fields
You can select, group or ungroup, reorder, and delete form fields as needed.

Save and Print Forms
Designed form fields can be saved into the PDF document and printed with their appearances.

Enable form designer

To enable form design features, inject the FormDesigner module into the PDF Viewer. After injecting the module, use the enableFormDesigner API to show or hide the Form Designer option in the main toolbar.

// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner,
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.TextSearch
);

// Create viewer instance
var pdfviewer = new ej.pdfviewer.PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  enableFormDesigner: false
});

// Render viewer
pdfviewer.appendTo('#PdfViewer');

Form designer UI

When Form Designer mode is enabled in the Syncfusion JavaScript PDF Viewer, a default Form Designer user interface (UI) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.

FormDesigner

For more information about creating and editing form fields in the PDF Viewer, refer to the Form Creation in JavaScript PDF Viewer documentation.

Form designer toolbar

The Form Designer toolbar appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:

Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.

Adding Text Box

Use the following Code-snippet to enable Form Designer by injecting Form Designer mode Module.

// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner,
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.TextSearch
);

// Create viewer instance
var pdfviewer = new ej.pdfviewer.PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  enableFormDesigner: false
});

// Render viewer
pdfviewer.appendTo('#PdfViewer');

For more information about creating and editing form fields in the PDF Viewer, refer to the Form Creation in TypeScript PDF Viewer documentation.

Show or Hide the Built-in Form Designer Toolbar

You can control the visibility of the Form Designer toolbar using the isFormDesignerToolbarVisible() method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements.

Use this method to:

  • Show the Form Designer toolbar when form design is required
  • Hide the toolbar to provide cleaner viewing experience
<!-- Buttons to toggle the Form Designer toolbar -->
<button id="showDesignerBtn">Show Form Designer Toolbar</button>
<button id="hideDesignerBtn">Hide Form Designer Toolbar</button>
// Wire up buttons
document.getElementById('showDesignerBtn').onclick = function () {
  pdfviewer.isFormDesignerToolbarVisible = true;
};
document.getElementById('hideDesignerBtn').onclick = function () {
  pdfviewer.isFormDesignerToolbarVisible = false;
};

Customize the Built-in Form Designer Toolbar

You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the FormDesignerToolbarItems property.

This customization helps you limit the available tools and simplify the user interface.

Key Points

  • Include only the toolbar items you need, in the exact order you specify.
  • Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
// Customize the Built-in Form Designer Toolbar
pdfviewer.toolbarSettings = {
  formDesignerToolbarItems: [
    'TextboxTool',
    'PasswordTool',
    'CheckBoxTool',
    'RadioButtonTool',
    'DropdownTool',
    'ListboxTool',
    'DrawSignatureTool',
    'DeleteTool'
  ]
};

Move, resize, and edit form fields

Move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.

  • Move a field by selecting it and dragging it to the required position.

  • Resize a field using the handles displayed on the field boundary.

Moving and resizing a form field

  • Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of form field and widget annotation properties. Changes are reflected immediately in the viewer and saved when the properties popover is closed.
    For more information, see Editing Form Fields

Deleting form fields

Remove a form field from the PDF document by selecting the field and using one of the following methods:

  • Click the Delete option in the Form Designer UI.
  • Press the Delete key on the keyboard after selecting the form field.

The selected form field and its associated widget annotation are permanently removed from the page.
For more information, see Deleting form fields

See also