DEV Community

Cover image for How to Create Interactive Fillable PDF Forms Using JavaScript PDF Viewer
Syncfusion, Inc. profile image Calvince Moth
Calvince Moth for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

How to Create Interactive Fillable PDF Forms Using JavaScript PDF Viewer

#pdf #formdesigner #javascript #pdfforms

TL;DR: Want to turn static PDFs into interactive forms? This guide shows you how to create fillable PDF forms in JavaScript using a PDF Viewer and Form Designer. Add dynamic fields, customize layouts, and manage form data programmatically, perfect for building user-friendly workflows in your web apps.

Creating interactive PDF forms is essential for modern business workflows, whether you’re collecting customer information, processing applications, or managing agreements. However, building a web-based solution that lets users create fillable PDF forms and manage form fields can be challenging for developers and product teams.

That’s where Syncfusion’s JavaScript PDF Viewer simplifies the process. It enables you to easily design and customize fillable PDF forms, add or edit form fields, and even save user input, all without complex integrations or heavy coding. With support for both intuitive UI-based design and programmatic customization, you can quickly deliver professional, interactive PDF forms that look great and work seamlessly.

In this blog, we’ll walk through how to generate fillable PDF forms, design and customize form fields, and enable form filling, all using Syncfusion’s developer-friendly approach.

Let’s dive in!

Setting up Syncfusion PDF Viewer for form creation

Integrating Syncfusion’s JavaScript PDF Viewer into your project is easier than you might think. Let’s create your PDF editor in the Web browser.

Step 1: Create a project folder

Start by creating a folder for your application, for example, my-app. This folder will contain all your project files, including the HTML page that will host the Syncfusion Essential JS 2 JavaScript components.

Step 2: Add script and style from CDN

Syncfusion’s Essential JS 2 components are available on a CDN, so you don’t need to install anything. Just include the script and style links in your HTML file. This makes setup quick and hassle-free.

<head>
    <title>Essential JS 2 PDF Viewer</title>
    <!-- Common Material 3 Theme -->
    <link href="https://cdn.syncfusion.com/ej2/31.2.2/material3.css" rel="stylesheet">
    <!-- Essential JS 2 Script -->
    <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Step 3: Create an HTML file

Inside your my-app folder, create an index.html file. Add a <div> element where the PDF Viewer will appear. Then, initialize the Syncfusion PDF Viewer component.

<body>
    <div id="PdfViewer" style="height:580px;width:100%;"></div>
    <script>
        // Initialize PDF Viewer
        var pdfviewer = new ej.pdfviewer.PdfViewer({
            documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
            resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
        });

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

        // Render PDF Viewer
        pdfviewer.appendTo('#PdfViewer');
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Step 4: Launch in your browser

Once your index.html file is ready, launch it in any modern browser, like Chrome, Edge, or Firefox. The Syncfusion PDF Viewer will load instantly and display a sample PDF.

<alt-text>


PDF document loading instantly from a single local HTML file

Note: For more detailed guidance, check out our official documentation.

Create fillable PDF Forms with Syncfusion

Ever wondered how to turn a plain PDF into a fully interactive form? With Syncfusion’s PDF Viewer, you can design fillable PDF forms right inside your web application. In this section, we’ll start with a simple PDF and guide you to add text boxes, checkboxes, radio buttons, and more, step by step.

Step 1: Enable form designer in the toolbar

To start creating form fields, click the f** orm designer** option in the built-in toolbar. This opens the Form Designer panel, which lists all standard form field types, such as;

  • Textbox
  • Password
  • CheckBox
  • RadioButton
  • ListBox
  • DropDown
  • Signature field
  • Initial field

Step 2: Select the required form field

Choose the form field that matches your use case. For example:

  • Text box: Capturing user details like Name, Email, or A** ddress**. Ideal for any free text input.
  • Password: Designed for secure entry of sensitive data such as Login Passwords or PINs.
  • CheckBox: Perfect for multiple-choice options like Agree to Terms, Subscribe to Newsletter, or Select Preferences.
  • Radio button: Best for single-choice options such as Gender Selection, Payment Method, or Yes/No Questions.
  • ListBox: Allows users to select one or multiple items from a list, e.g., Choose Skills, Select Interests, or Pick Categories.
  • DropDown: Ideal for compact menus where space matters, such as Country Selection, State, or Department.
  • Signature field: Used for capturing Signatures for approvals, agreements, or consent forms.
  • Initial field: Perfect for quick Initials in documents requiring acknowledgment or partial approval.

Step 3: Drag and drop the field

Once you’ve selected a field, simply drag and drop it anywhere in the PDF. This intuitive feature makes it easy to position fields exactly where you want them.

<alt-text>


Drag and drop signature field

Add form fields programmatically in your PDF

Want to add form fields without using the toolbar? Syncfusion makes it simple with the addFormField method. Just pass the form field type and its property object as parameters.

Here’s an example that shows how to add multiple fields to your document:

pdfviewer.formDesignerModule.addFormField("Textbox", { 
    name: "First Name", 
    bounds: { X: 146, Y: 229, Width: 150, Height: 24 } 
});

pdfviewer.formDesignerModule.addFormField("Textbox", { 
    name: "Middle Name", 
    bounds: { X: 338, Y: 229, Width: 150, Height: 24 } 
});

pdfviewer.formDesignerModule.addFormField("Textbox", { 
    name: "Last Name", 
    bounds: { X: 530, Y: 229, Width: 150, Height: 24 } 
});

pdfviewer.formDesignerModule.addFormField("RadioButton", { 
    bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, 
    name: "Gender", 
    isSelected: false 
});

pdfviewer.formDesignerModule.addFormField("RadioButton", { 
    bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, 
    name: "Gender", 
    isSelected: false 
});

pdfviewer.formDesignerModule.addFormField("InitialField", { 
    name: "Agree", 
    bounds: { X: 148, Y: 408, Width: 200, Height: 43 } 
});
Enter fullscreen mode Exit fullscreen mode

These steps cover the basics of adding form fields using the toolbar and interacting with them programmatically, but Syncfusion offers much more. Explore all form field types and advanced customization options with this documentation.

Step 4: Edit and customize form fields

Adding form fields is only the first step. Real customization happens when you make them look and behave exactly the way you want. With Syncfusion’s PDF Viewer, editing is easy:

  • Enable Form Designer mode.
  • Double-click any field to open its Properties dialog.
  • Adjust background color, border color, font size, alignment, and more, all with a few clicks.

This ensures your fillable PDF forms match your application’s design perfectly.

<alt-text>


Customize field properties in Form Designer Mode

Customize PDF form field programmatically

Need dynamic control? Use the updateFormField method or field settings to change properties like background color, name, font size, and more on the fly. This is ideal for automated workflows or dynamic forms. The following code demonstrates modifying field properties by field setting:

// Properties to customize the signature field settings
pdfviewer.signatureFieldSettings = {
    // Set the name of the form field element.
    name: 'Signature',

    // Specify whether the signature field is in read-only or read-write mode.
    isReadOnly: false,

   // Set the text to be displayed as a tooltip.
    tooltip: 'Signature',

    // Set the thickness of the Signature field. To hide the borders, set the value to 0 (zero).
    thickness: 4,

    // Edit the properties based on your needs.
}
Enter fullscreen mode Exit fullscreen mode

Note: For detailed information on editing form field properties programmatically, please refer to our documentation.

Step 5: Seamless PDF form filling and data management

Once your form fields are ready, it’s time to put them to work. Filling interactive PDF forms transforms a static document into a dynamic data collector. Syncfusion makes this process effortless, ensuring a smooth user experience and accurate data.

<alt-text>


Seamless form filling interactive fields ready for real user data

Update PDF form fields programmatically

Need to pre-fill forms automatically? Whether pulling data from a database or generating personalized content, the updateFormField method gives you complete control.

pdfviewer.formDesignerModule.updateFormField(
    pdfviewer.formFieldCollections[0], 
    { value: "John" }
);

pdfviewer.formDesignerModule.updateFormField(
    pdfviewer.formFieldCollections[1], 
    { value: "David" }
);

pdfviewer.formDesignerModule.updateFormField(
    pdfviewer.formFieldCollections[2], 
    { value: "M" }
);
Enter fullscreen mode Exit fullscreen mode

Note: For detailed information about updating PDF form field values programmatically, please refer to our documentation.

Import and export PDF form data dynamically for fillable PDF forms

Managing form data efficiently is critical for business workflows. Syncfusion provides built-in options to import and export form field data in formats like JSON, FDF, and XFDF.

Export data:

// Data must be the desired path for the exported document.
viewer.exportFormFields('Data', FormFieldDataFormat.Json)
Enter fullscreen mode Exit fullscreen mode

Import data:

viewer.importFormFields('Filename', FormFieldDataFormat.Json)
Enter fullscreen mode Exit fullscreen mode

Note: The Filename for importing the form fields should be placed in the desired location, and the path should be provided correctly.

This makes integration with databases, APIs, and automated workflows seamless. For complete details about exporting and importing form fields as objects, check out our official documentation.

Complete your PDF form workflow: Validate, download, and print with ease

Managing PDF forms isn’t just about filling them out; it’s about delivering a complete, seamless workflow. Syncfusion’s PDF Viewer lets you:

  • Validate user input before submission.
  • Download filled forms for record-keeping.
  • Print the finalized PDF forms instantly for offline use.

Together, these capabilities transform PDF form into a fast, reliable, and user-friendly experience.

Conclusion

Thank you for reading! Choosing the right approach for building interactive PDF workflows depends on your project goals. If your requirements include advanced features like creating fillable forms, managing complex layouts, and delivering a smooth user experience, a comprehensive solution can save you significant development time and effort.

Think about your priorities:

  • Performance: Does your solution need to handle large documents efficiently?
  • Flexibility: Do you want full control over customization?
  • Integration: Should it work seamlessly with your existing systems?

Do you need a ready-to-use UI for quick deployment, or programmatic APIs for complete customization? Answering these questions will help you decide whether to build from scratch or use a feature-rich library that scales with your needs.

Syncfusion’s JavaScript PDF Viewer is a great choice if you’re looking for a complete solution. It offers a full set of features and ready-to-use components, making integration simple and helping you deliver interactive PDF workflows faster.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Top comments (0)