How to Programmatically Process Fillable PDF Forms using Javascript

This article will show you how to use the Joyfill SDK to extract structured data from fillable PDFs.

For the example in this article, we will convert a user survey form that is originally a fillable PDF into a Joyfill template. The template can then be used to make documents that can collect data from users.

Note that Joyfill supports any type of fillable PDF form, as long as it was authored using a standard PDF tool.

Our goal is to show developers a simple way of modernizing a workflow that depends on fillable PDF forms. It does so by replacing the fillable PDF form with a workflow that uses a modern interface that can send the form data directly to a database. It refers to this doc example: https://docs.joyfill.io/docs/templates-workflow. Let’s dive in.

Collecting Data from Users Using Forms

Companies often prod their repeat users to complete short surveys so they can improve their services. These surveys are often shared over a variety of mediums like email, live chat, or even in-person. In-person surveys can be quite effective as it is a quick way to obtain real-world feedback from users who are already in your store to make a purchase.

We are going to use a simple user survey form that exists as a fillable PDF, and turn it into a completely digital form. With the survey form being completely digital, users can conveniently complete the surveys using their phones, in addition to using in-store tablets.

A Basic User Survey PDF Form

Here’s a screenshot of the basic user survey form named form-survey.pdf which we will be using in the rest of this article. It is a fillable PDF form and a copy can be downloaded from GitHub:

Turning a Fillable PDF into a Joyfill Form Template

First, you will need to sign up for a Joyfill developer account. Please follow the account setup instructions.

Next, login to Joyfill Manager which should put you on the Templates page.

Click on the “Add Template” button and select “Blank” to create a new template.

On the right is a file upload panel where you can drag and drop the fillable PDF form form-survey.pdf file for upload. The PDF will be used as the basis for the template we will be creating.

Once the upload is complete, a preview of the fillable PDF will be shown on the page:

Next is to wire up each of the fillable form fields to their respective equivalents in the Joyfill Form template. The template can then be used to create documents that can capture the same survey data that the original fillable PDF was designed to collect.

As you can see in the screenshot above, the fillable PDF form fields were mapped to the Joyfill Form template as follows:

• “Firstname” is mapped to a “Text” field;

• “Lastname” is mapped to a “Text” field;

• “Age Range” is mapped to a “Dropdown” field with 5 age ranges;

• “Feedback” is mapped to a “Multiline Text” field

Before clicking on the “Save” button at the top right hand of the page, you can briefly review how the form will look on mobile. To do this, click on the mobile device icon at the bottom of the page.

In the mobile preview, the Joyfill Form template uses a responsive layout–it adapted the user survey form to look good on the smaller screen of a mobile device even though the original form which was designed for a desktop screen.

Click on the “Save” button to save the template with the name “customer-survey” then navigate back to the Templates page.

On the Templates page, click on the “Edit” button to change the status of the “customer-survey” template from “Draft” to “Published”.

Now, make a note of the template’s ID. In our example, the template ID is: template_66eb4d446cf79296d85d7a80.

Add Some User Survey Data

Now that a Joyfill Form template has been created, let’s create a handful of user survey data.

While on the Templates page, click on the “Fill Out” button on the right hand side of the page to switch to form-filling mode:

Complete the survey then click on the “Save” button to record the survey response to Joyfill.

Repeat the process 2 more times so we can have 3 user responses to work with.

You should be able to see the 3 user responses you made by visiting the Documents page:

Fillable PDF Form Data Collection Demo

To view the survey data that was collected, we will use the Joyfill SDK.

There’s a fully functional demo on GitHub:  https://github.com/ayewo/joyfill-pdf-sample-01/. Note that you need to have Node.js v18+ and Yarn installed.

Please follow these steps to configure and run the demo:

1. Clone the demo locally: git clone https://github.com/ayewo/joyfill-pdf-sample-01/

2. Change into the folder and open the file “src/api.js” in your text editor. You will replace the string “'<REPLACE_USER_ACCESS_TOKEN>'” with your user access token. Please follow these instructions to obtain a user access token.

3. Install all of the React app’s dependencies by simply running “yarn”

4. We will now start the app with “yarn start”.

The “yarn start” command should automatically open http://localhost:3000 in your browser.

Clicking on “Templates Workflow Demo” > “View Data” > should show the 3 sample survey data that you added earlier.

Summary

The Joyfill SDK and API were expressly built to support the needs of businesses seeking a fully integration alternative to the disjointed experience of using fillable PDF forms to organize data.

They offer a modern, web-based viewing experience for end-users of forms on mobile and desktop.