PDF Template Designer

What Is The PDF Template Designer

The PDF Template Designer allows form builders to design and format the PDF output of webform submissions, while maintaining the original webform layout and structure end-users fill out.

Contact sales@form.io for more information on the PDF Template Designer

Why Should I Use The PDF Template Designer

A direct one-to-one output of the submission data is not always the desired outcome when downloading webform submission to a PDF output. At times, this data output is required to be specifically formatted to meet certain requirements. Utilize the PDF Template Designer to support these requirements, such as formatting submission data into customized receipts, contracts, mailers, reports, etc...

How To Use The PDF Template Designer

The PDF Designer is an add-on for the Enterprise self-hosted deployment included with the PDF Plus offering. Once enabled, a PDF icon will appear within the form header, in between the Data and Actions tab.

Entering the PDF Template Designer mode will direct the user to a special builder where the PDF Template can be configured and designed. Although it resembles the builder seen in Form edit mode, the PDF Template builder is limited and determines which webform component data should be included and the layout of that data within the PDF submission output.

Within the builder, all Form.io Layout Components are available to organize and arrange the submission data within the PDF output download. The Existing Fields tab lists all components within the webform that can be added to the PDF Template Designer. Submission data of these Existing Fields will be included within the PDF output download.

Use Search field(s) to quickly find components you wish to include within the PDF output.

Use the Clear PDF Form button to quickly start from scratch with a new design. Click the Reset All Components button to restore all components to their original state in the Webform.


This example will demonstrate creating a PDF Template originating from a large webform containing a multitude of fields. The PDF Template will take several key fields from the form to generate a general summary of the webform.

Prerequisite Create a webform with submission data. This example is using a Worker Compensation Application with a large number of fields.

  1. Click the PDF tab within the Form header of the webform to navigate to the PDF Designer.

  2. Click the Clear PDF Form to start PDF Template Designer from a blank slate

  1. Add Layout components to organize fields that will be included in the PDF output

  1. Click the Existing Fields and add fields from the webform that should be included in the PDF output.

  1. View a submission within the Data tab of the webform

  1. Click the PDF Icon when viewing the submission

Last updated