Skip to main content

Personalize Your Form Response PDFs: Template Editor

Every time someone submits a web form, Whautomate creates a PDF of the response. You can send it to the client, print it from their profile, or attach it in an automation. The PDF editor lets you change that document: your own header and branding, a different layout, or extra text that only appears for certain answers (for example aftercare advice when a client ticks "Deep tissue").

Available withCRM SuiteIncluded in the Complete plan.Plans and modules

Before you start​

  • The template is HTML and CSS with Handlebars for the dynamic parts. If you are new to them, see the HTML and CSS tutorials.
  • Submit at least one test response first, so you can preview the PDF with real data.

Open the PDF editor​

  1. Open Engage > Forms & Flows and open the form.
  2. Click PDF in the top bar. If print settings are on for your account, PDF opens a menu: choose Customise PDF template, or Customise print PDF template for the printed version.
  3. The Form PDF Editor opens with three tabs:
    • Template: the HTML template you edit.
    • Preview: the PDF generated from the template.
    • Data: the response data the template can use.
  4. In Select a Response to Preview, pick a response to preview the PDF with its answers.
  5. Edit the template and click Save and Preview to save and see the result.
  6. To undo all your changes, click Reset to Default. Click Back to the form when you are done.
Form PDF Editor with the Template tab, the response selector and the Save and Preview and Reset to Default buttons

How the template is built​

The default template is a basic HTML document styled with CSS, sized for A4. Handlebars fills in the business details and every section, question and answer of the response. It has three parts.

CSS styles​

Simple styling for an A4 page. Change fonts, colours and spacing here.

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

Add content based on answers​

Use the two helpers Whautomate adds to Handlebars to show content only for certain answers:

  • ifEquals: shows the content when an answer equals one value, for example {{#ifEquals this.answerValue 'test'}}.
  • ifAny: shows the content when an answer is any of several values, for example {{#ifAny this.answerValue "red,green,blue"}}.
  1. On the Template tab, scroll to the loop over questions. A commented-out example condition is already there.
  2. Copy the example below inside the question loop and change the value to an answer from your form. For several conditions, paste them one after another.
  3. Pick a response that matches in Select a Response to Preview and click Save and Preview.

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

The Data tab shows the exact field names available for the selected response. Use it to find answerValue values to compare against.

Last updated on