Fillable PDF

Owned by Charlotte Armstrong
Last updated: Sept 11, 2024 by Kevin Paxman
6 min read

What is a fillable PDF web form?

A fillable PDF allows users to fill out a PDF form using editable fields - users are able to add information directly into the PDF document.

WCMS Web forms can connect with a fillable PDF. This allows users to fill out and submit a web form. Once submitted, the collected data will automatically fill the PDF document and users can print the PDF.

When to create fillable PDF forms in the WCMS

Typically, we only recommend creating fillable PDFs in the WCMS when an original signature on paper is required.

Example: Students need to complete a form, but an original signature on paper is required. WCMS Web forms and fillable PDFs can be used together to allow the student to complete the form in their web browser and download a PDF of the completed form, which they print, sign, and return.

Difficulty level of this feature

Connecting fillable PDFs to the WCMS can be very complex and require existing knowledge and experience with the WCMS and Web forms, specifically. We highly encourage anyone creating a web form to complete WCMS 3 Web form training.

Creating the initial fillable PDF requires experience in software like Adobe Acrobat Pro. Any questions regarding how to create the fillable PDF should be directed to Adobe customer service.    

Creating a fillable PDF web form

Step 1: Create the initial fillable PDF

Create a fillable PDF form. You can make this in software like Adobe Acrobat Pro  (available through the IST Webstore) or LibreOffice (free LibreOffice download). You may want to include a field on the fillable PDF document called Serial number. This will be required to keep track of submissions.

Step 2: Create a WCMS web form

Create a WCMS web form configured to collect the information you need.

We strongly recommend completing WCMS 3 Web forms training prior to creating web forms.

Note: the Form editor role is required to create web forms. Contact your Website lead if you currently do not have the Form editor role.

Step 3: Upload and configure your fillable PDF

Manually configure your fillable PDF by linking each field in the PDF to its corresponding field in the web form.

  1. From the administration bar, select Workbench, and then select My Dashboard.

  2. Under the Forms section, select the drop-down arrow beside Form.

  3. Select Manage PDFs.

  4. Under Upload PDF template, upload your PDF file by selecting Browse.

  5. Once you have uploaded your PDF, select Create.

  6. The Edit FillPDF form page will appear. Configure the PDF.

  7. It is recommended that you provide an Administrative title. This is the title that will display on the form overview page.

  8. By default, the Filename pattern field will contain the name of your PDF file. Optionally, edit the Filename pattern. This is the filename that users will see when downloading their filled form.

  9. Using the drop-down arrow under Default Webform, select the Web form to which this PDF will be linked.

  10. In the PDF Form Information panel:

    1. Update PDF template: Only use this field if you need to change/update the PDF document.

    2. Sample PDF: Select See which fields are which in this PDF. This will download a PDF in which each field has been filled with the matching PDF key. This will allow you to cross reference which PDF key matches which PDF field.

    3. Form info: Locate the Form ID (the number between the square brackets). Write this number down as it will be used when creating a download link on the confirmation page.

  11. Skip over the additional settings section. Most forms do not need these settings.

  12. At the bottom of the Edit PDF form page is a list of all the fields in the PDF. Under PDF Key, there is an identifiable PDF key that corresponds with the different labels in the PDF.

  13. For each field that you want to fill, add a token that includes the corresponding element key (found in the Web form). Begin with the first field you will need to fill (confirm it is the correct one by reviewing the Sample PDF). Under Operations, select Edit.

  14. It is recommended that you provide a PDF field label to identify the field, particularly if purpose of the field is not immediately obvious from the PDF key. This will be used in the table listing the fields.

  15. In the Fill pattern field, add the token and corresponding element key. To locate the element key, open the original Web form, and select the build tab. The element key will show under the Key column.

    1. Different tokens are used depending on the type of field used in the fillable PDF. Ensure the token and element key is in lowercase, include the square brackets, and that there are no spaces within or before/after the token before saving.
      Here are some common examples:

      1. Textfield: [webform_submission:values:element_key] (replace element_key with the actual element key name)

      2. Example: [webform_submission:values:first_name]

  16. Select Save.

  17. Repeat steps 13-15 for each PDF field key that you want to fill. When you are done, select Save on the Edit FillPDF form page.

Test

After configuring your fillable PDF it is recommended to test your web form to see that each field is filling correctly. To do this: 

  1. Make a submission to your web form by filling out each field.

  2. Return to the Edit FillPDF form page.

  3. Under Default Webform, select Download this PDF template populated with data from the webform [webform-name].

  4. This will download a PDF with the fields filled out according to the last submission. Confirm that all fields are filling as expected. Adjust your fillable PDF settings if needed.

Step 4 (optional): Create a serial number

A Serial number PDF is a unique sequence of numbers assigned to the completed PDF form for the purpose of identifying a specific form submission. When users submit a web form, a serial number will be assigned automatically to the appropriate PDF field. The serial number changes in increments of one each time a form is submitted (e.g., if starting serial number is 10000, the next form submission will have a serial number of 10001).

Remember that there needs to be a Serial number field on the fillable PDF in order for this feature to work. Do not add the serial number field to the web form.

  1. From the administration bar, select Workbench, and then select My Dashboard. 

  2. Under Forms, select the arrow beside Form. 

  3. Select Manage PDFs.

  4. Select Edit under Operations for the PDF that corresponds to your Web form.

  5. Navigate to the PDF Key table and select Edit under Operations for the serial number element. 

  6. In the Fill pattern field, enter [webform_submission:serial]. 

  7. Select Save. 

  8. To change the starting serial number, select the Settings tab on the Web form.

  9. Select the Submissions sub-tab.

  10. Under Submission General Settings, navigate to Next submission number field and enter the desired starting serial number (e.g., 10000).

  11. Select Save. 

  12. Test the serial number PDF by completing/submitting the web form, and then download and open the completed PDF form.  

Providing users the option to download the Fillable PDF 

Now that the Fillable PDF has been configured and tested, the next step is to provide the option for users who complete your web form to download their filled PDF. A link to the Fillable PDF can be displayed on the confirmation for both authenticated and anonymous users. See how to create a download PDF link on the confirmation page.