# 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. 

{% hint style="info" %}
Contact <sales@form.io> for more information on the PDF Template Designer
{% endhint %}

{% embed url="<https://www.loom.com/share/1910e04094d24dc2b5eef6bd25a9d8e3>" %}

## 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**](https://help.form.io/developer-tool-ecosystem/pdf-solution#pdf-plus). Once enabled, a PDF icon will appear within the form header, in between the *Data* and *Actions* tab.

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fu5FTsQglRBXEtrx19dPS%2Fpdftab.jpg?alt=media&#x26;token=3eb1d7d0-8b99-4a09-8b09-1571d2e0c204" alt=""><figcaption></figcaption></figure>

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.&#x20;

Within the builder, all Form.io [**Layout Components**](https://help.form.io/userguide/forms/form-building/form-components/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.&#x20;

{% hint style="info" %}
Use **Search field(s)** to quickly find components you wish to include within the PDF output.&#x20;
{% endhint %}

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FOxWuymEndQL2NXIRjewd%2Flayoutcomponents.jpg?alt=media&#x26;token=48dca650-c3d9-417a-b46d-3e93306be71f" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FPkAtuM3ATKvMmvQ0KasH%2Fpdfdesigner.jpg?alt=media&#x26;token=6c7f660f-c085-449e-885a-c5c2199dadbc" alt=""><figcaption></figcaption></figure>

## Tutorial

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.&#x20;

**Prerequisite**\
Create a webform with submission data. This example is using a Worker Compensation Application with a large number of fields.&#x20;

1. Click the **PDF** tab within the Form header of the webform to navigate to the PDF Designer.&#x20;
2. Click the **Clear PDF Form** to start PDF Template Designer from a blank slate

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FXJZFPtNPCrQP1qmk32Ve%2Fclear.jpg?alt=media&#x26;token=593e9d8d-defa-445e-a081-2da9d1532b1f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F9dTAtjsd2JCXCzsxXouM%2Flayout.jpg?alt=media&#x26;token=f99664b7-472f-4417-952b-044617bff38a" alt=""><figcaption></figcaption></figure>

4. Click the **Existing Fields** and add fields from the webform that should be included in the PDF output.&#x20;

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F64t5A4BE0uVvysGR4OAT%2Ffields.jpg?alt=media&#x26;token=f2a53e84-f289-43ab-accd-6db70ece74a2" alt=""><figcaption></figcaption></figure>

5. View a submission within the **Data** tab of the webform

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FyU4ZrQzkaEmgfdgxu10g%2Fdatatab.jpg?alt=media&#x26;token=daf59aa8-3bf5-4bed-9a7c-978d9991e6a5" alt=""><figcaption></figcaption></figure>

6. Click the **PDF Icon** when viewing the submission

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Ftm2WQtIedCNOjy4uLusa%2Fpdfoutput.jpg?alt=media&#x26;token=f23c72be-319c-4f9b-9612-f680044cbda1" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.form.io/userguide/pdf-template-designer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.