Fillable PDF web forms
What is a fillable PDF web form?
A fillable PDF allows users to fill out a PDF form online using editable fields. This allows users to type in the information directly into the PDF document.
WCMS web forms can connect with a fillable pdf. This allows users to simply fill out and submit a web form. Once submitted, the collected data will automatically fill the PDF document. Users can then print the PDF document.
When to create fillable PDF forms in the WCMS
You may be wondering when this feature would be useful. 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 form and fillable PDF 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
Although this sounds simple to create, connecting fillable PDFs to the WCMS can be very complex and cumbersome and therefore, requires a moderate skill level with the WCMS. Creating a fillable PDF requires knowledge and experience using Adobe Acrobat Pro. Any questions regarding how to create the initial fillable PDF should be directed to Adobe customer service. Knowledge of creating WCMS 3 Web forms is also required. We highly encourage anyone creating a web form to complete our WCMS 3 Web form training.
How to create:
Step 1: Create a 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). Remember 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 the WCMS 3 Web forms training course prior to creating web forms. Note that the Form editor role is also required to create web forms. Reach out to your Website lead if you currently do not have access to create forms.
Step 3: Upload and configure your fillable PDF
Upload and configure
Manually configure your fillable PDF by linking each field in the PDF to its corresponding field in the web form.
From the administration bar, select Workbench, and then select My Dashboard.
Under the Forms content type, select the dropdown arrow beside Form.
Select Manage PDFs.
Under Upload PDF template, upload your PDF file by selecting Browse.
Once you have uploaded your PDF select Create.
The Edit PDF form page will appear. Configure the PDF.
Administrative title: Optionally, provide an Administrative title. This is the title that will display on the form overview page.
Filename pattern: By default, the Filename pattern field will contain the name of your PDF file. Optionally, adjust the Filename pattern.
Default Webform: Using the drop-down arrow under Default Webform, select the Web form to which this PDF will be linked.
In the PDF Form Information panel:
Update PDF template: Only use this field if you need to change/update the PDF document.
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.
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.
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.
For each field that you want to fill, you will need to 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.
In the Fill pattern field, add the token and corresponding element key. To locate the element key, open the original Web form, select the build tab. The element key will show under the Key column.
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 samples:Textfield: [webform_submission:values:element_key] (replace element_key with the actual element key name)
Example: [webform_submission:values:first_name]
Select Save.
Repeat steps 13-15 for each PDF field key that you want to fill.
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:
Make a submission to your web form by filling out each field.
Return to the Edit FillPDF form page.
Under Default Webform, select Download this PDF template populated with data from the webform [webform-name].
This will download a PDF with the fields filled out according to the last submission. Confirm that all fields are filling as expected.
Step 4: 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.
From the administration bar, select Workbench, and then select My Dashboard.
Under Forms, select the arrow beside Form.
Select Manage PDFs.
Select Edit under Operations for the PDF that corresponds to your Web form.
Navigate to the PDF Key table and select Edit under Operations for the serial number element.
In the Fill pattern field, enter [webform_submission:serial].
Select Save.
To change the starting serial number, select the Settings tab on the Web form.
Select the Submissions sub-tab.
Under Submission General Settings, navigate to Next submission number field and enter the desired starting serial number (e.g., 10000).
Select Save.
Test the serial number PDF by completing/submitting the web form, and then download and open the completed PDF form.
Step 5: Create a download PDF link (optional)
Create a download PDF link on the confirmation page, allowing form submitters to download and print the PDF.
Locating the Form ID number
This is the ID number that we noted to write down in Step 11 of Upload and Configure, and can be found under PDF Form Information. If you are starting from this step, you can find this number by completing the following:
From the administration bar, select Workbench, and then select My Dashboard.
Under Forms, select the drop-down arrow beside Form.
Select Manage PDFs.
Select Edit under the Operations column for the Web form you want to create the download PDF link for.
Under Form Info, locate the Form ID number (the number between the square brackets). In this example, the Form ID number is 1.
Creating the Download PDF Link
From the administration bar, select Workbench, and then select My Dashboard.
Navigate to the Forms list.
Locate the form you want to configure and select the drop-down menu under the Operations column.
Select Settings.
Select the Confirmation sub-tab.
In the Confirmation message field, select Source.
Paste the following text: <a href="https://uwaterloo.ca/site-name/fillpdf?fid=FormID&entity_type=webform_submission&entity_id=[webform_submission:sid]">Download PDF</a>
Replace site-name with the name of your site. Ensure you follow the naming convention. All letters must be lowercase and use hyphens instead of spaces.
Replace Form ID number with the number in square brackets.
Replace Download PDF with the link text you want to display. If left unchanged, the link text on the confirmation page will be "Download PDF."
Select Save.