Personalize Your Form Response PDFs: Template Editor

Whautomate generates PDF automatically when someone submits a form. You can use this functionality to customise the PDF generated for your needs and send it to the client who filled up the form.

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

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.

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! 👇

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

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.

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.

Please check here to understand or learn about

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

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

CSS - https://www.w3schools.com/css/default.asp

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.

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

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

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

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.

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

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.

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'}}

Conditionally generated Content example

// 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.👇