# Personalize Your Form Response PDFs: Template Editor

**Step 1:** Go to the **Whautomate app,** Select the **Settings** menu option, and Click the **Forms** option in the Templates section to continue.

<figure><img src="/files/Fa9Xx3brL1OL4kMohXpA" alt=""><figcaption></figcaption></figure>

**Step 2:** Select the form you want to edit the PDF template, then select the **Edit PDF Template** section and Click the **Customise PDF Template** button to continue.

<figure><img src="/files/ODsKrvsgRSKDzKQDwyBc" alt=""><figcaption></figcaption></figure>

**Step 3:** On the left side section of the **Template**, you can edit various elements such as Font, Font Size, color, Form Responses, add custom content, and more! 👇

<figure><img src="/files/Oe3bQYooIwvLDosoV51x" alt=""><figcaption></figcaption></figure>

**Step 4:** Within the right-side section of the PDF Preview, after modifying the template, click the "**Save and Preview**" button to observe the changes in the **Preview** section. 👇

<figure><img src="/files/pJDGBESDU7xlRXZrbP4o" alt=""><figcaption></figcaption></figure>

**Step 5:** Select the **Data** section to access the data used for the generated PDF preview. You can also change the form response to review different previews while editing your template.

<figure><img src="/files/uxdv2PYBeCLAYN2UkUjm" alt=""><figcaption></figcaption></figure>

## How to Customise PDF Template?

**Let us understand the PDF Template and its different sections** \
The PDF template comprises various sections within a basic HTML document styled with CSS. It serves to generate the PDF upon form completion. Utilizing Handlebars, a straightforward templating language, enables a dynamic content population based on each response.

{% hint style="info" %}
Please check here to understand or learn about&#x20;

handlebars  - <https://handlebarsjs.com/guide/#what-is-handlebars>

HTML - <https://www.w3schools.com/html/>

CSS - <https://www.w3schools.com/css/default.asp>
{% endhint %}

Lets understand the different sections of the PDF template

### CSS Styles

It is a simple styling which is catered for the PDF document in A4, You can customise it according to your need.

```html
<style>
  @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap");
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: "Quicksand", sans-serif;
    color: #273445;
  }

  .black-color {
    color: #273445 !important;
  }

  h1,
  p,
  h2 {
    margin: 0;
  }

  main {
    height: 100%;
    margin: 0;
  }

  .br {
    margin: 10px 20px;
    height: 1px;
    background-color: #273445;
  }

  .header {
    padding: 0 20px;
  }

  .content {
    padding: 20px;
  }

  .row1 {
    display: flex;
    justify-content: space-between;
  }

  .row1 .margin-bottom-small {
    margin-bottom: 5px;
  }

  .row1 .content-right {
    text-align: end;
  }

  .row1 .content-right .content-title {
    font-weight: 500;
  }

  table {
    width: 100%;
  }

  .content>table {
    margin-top: 30px;
  }

  thead {
    background-color: #e7eaef;
    border: 1px solid #273445;
  }

  tr {
    text-align: left;
  }

  th {
    padding: 15px;
    font-size: 18px;
  }

  td {
    padding: 15px;
  }

  .bottom-border {
    border-bottom: 1px dashed #273445;
  }


  p,
  div,
  span {
    font-size: 12px;
    font-weight: 600;
    color: #273445;
  }
</style>
```

### Header Section

The Header section has the business information and the logo as per the business settings setup within Whautomate. You can customise this to have a custom header for the generated PDF.

```html
<div class="header">
    <table cellspacing="0">
      <tr>
        <td style="width:60%; padding-top: 0">
          <h2 style="padding:0 0 5px;">{{business.name}}</h2>
          <div>
            <p style="padding:0 0 5px;">
              {{business.address}}
            </p>
            {{#if business.phone}}
            <p style="padding:0 0 5px;">
              Tel: {{business.phone}}
            </p>
            {{/if}}
            {{#if business.companyRegistrationNumber}}
            <p style="padding:0 0 5px;">
              Company reg. no: {{business.companyRegistrationNumber}}
            </p>
            {{/if}}

            {{#if business.gstNumber}}
            <p>
              GST: {{business.gstNumber}}
            </p>
            {{/if}}
          </div>
          <div>
        </td>
        <td style="width:40% padding-top: 0">
          {{#if business.logo}}
          <img style="max-width: 256px; max-height:128px;" src="{{business.logo}}">
          {{/if}}
        </td>

      </tr>
    </table>
  </div>
```

### PDF Content - Form Responses Section

This section forms the PDF content which loops through each section within the form response and displays the question and the answer in a table format. You can use handlebars syntax to apply the data and conditions to generate a PDF document according to your need.&#x20;

```
  <div class="center">
    <h2 style="text-align: center;">{{form.name}}</h2>
  </div>
  <div class="br"></div>
  <div class="content">
    <div class="row1">
      <div class="black-color">
        <!-- Client will only available on private forms with no personal details section. For other forms, Personal details of client will be added as form sections -->
        {{#with client}}
        <p class="margin-bottom-small black-color"><b>{{name}}</b></p>
        {{/with}}
      </div>
      <div class="content-right black-color">
        <p class="content-title black-color" style="font-weight: 600;">
          Completed : {{form.completedAt}}
        </p>
      </div>
    </div>
  <!-- Loop through each section -->
    {{#each form.sections}}
    <table cellspacing="0">
      <tbody>
        <thead>
          <tr>
            <th> {{this.name}}</th>
            <th></th>
          </tr>
        </thead>

        {{#if this.description}}
        <tr>
          <td colspan="2">
            <p>{{{this.description}}}</p>
          </td>
        </tr>
        {{/if}}
      <!-- Loop through each question under a section -->
        {{#each this.questions}}
        <tr>
          <td style="width:50%" class="bottom-border">
            <p class="black-color"><b>{{this.question}}</b></p>
          </td>
          <td style="width:50%" class="bottom-border">
            {{{this.answer}}}
          </td>
        </tr>
        {{/each}}

        <!-- 
        // IfEqual example - if the answer equals test, then display the row
         {{#ifEquals this.answerValue 'test'}}
              <tr>
                <td colspan="2" style="width:100%" class="bottom-border">
                 <p class="black-color"><b>Test</b></p> 
                </td>
              </tr>
         {{/ifEquals}}        
        // IfAny example - if the answer equals red or green or blue, then display the row
         {{#ifAny this.answerValue "red,green,blue"}}
          This color is red, green, or blue.
        {{else}}
          This color is not red, green, or blue.
        {{/ifAny}}
        -->

      </tbody>
    </table>
    {{/each}}
  </div>
```

### **To Add Custom Content based on Form Answers, Please follow the below example**

**Step 1:** Navigate down to the **Template Editor** section to access the form response answer condition area. We've included a sample test answer condition by default. Simply customize the condition to align with your real-time answer response report. 👇

<mark style="color:orange;">Note: To edit the Form Response PDF Template, ensure you have at least one form response to view real-time data, or you can only access the variable data.</mark>

<figure><img src="/files/LXT12lsQt3MV3yTTWFm6" alt=""><figcaption></figcaption></figure>

(i) To generate a form answer responses report for multiple questions, copy the example condition provided below. 👇&#x20;

Copy and paste it into the **Template Editor** section. Scroll down to find the default condition for one answer; if you wish to add more, paste them consecutively. Utilise our custom helpers available to generate content conditionally.&#x20;

{% hint style="info" %}
**HandleBars Custom helpers by Whautomate**

**IfAny:**\
Use this helper to check if the answer or question is of any of the possible values. \
E.g.  {{#ifAny this.answerValue "red,green,blue"}}\
\
**IfEquals:**\
Use this helper to check if the answer or question is equal to specific value. \
E.g. {{#ifEquals this.answerValue 'test'}}<br>
{% endhint %}

### Conditionally generated Content example

```html
// IfEqual example - if the answer equals test, then display the row
         {{#ifEquals this.answerValue 'test'}}
              <tr>
                <td colspan="2" style="width:100%" class="bottom-border">
                 <p class="black-color"><b>Test</b></p> 
                </td>
              </tr>
         {{/ifEquals}}        
        // IfAny example - if the answer equals red or green or blue, then display the row
         {{#ifAny this.answerValue "red,green,blue"}}
          This color is red, green, or blue.
        {{else}}
          This color is not red, green, or blue.
        {{/ifAny}}
```

**Step 2:** After modifying the form template, Click the **Save and Preview** button to see the template changes in the **Preview** section.👇

<figure><img src="/files/O6ISZefIMoyaxqtXjp4g" 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.whautomate.com/product-guides/forms/personalize-your-form-response-pdfs-template-editor.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.