Custom PDF, Word, and HTML Documents

This feature is available on the following tiers: Enterprise, Advanced.

About

Use the Custom Document Editor to design a fully custom PDF, Word, or HTML document from scratch.   This is great for documents that will be delivered to customers or other departments who are used to a particular format. 

Configuration options include:

  • Use HTML to get full control over how your document looks; make them exactly match your existing paper forms
  • Use CSS to style your documents effortlessly, and exactly how you need them to look
  • Use Conditional formatting, loops, and more

Documents like this is are typically intended for use with a single form, or a set of very related forms.   If you have many forms, you may want to use custom layouts only for your customer-facing documents, as they do take significantly more work to build and update than ones with a standard layout

You will need to be familiar with (or ready to learn) a bit of HTML and CSS; for more dynamic documents, you will need to get comfortable with our Form Submission structure, and learn to write simple loops and conditional statements. 

Example Documents

Below are a couple of PDF documents that have been generated using the document editor.

    

  

Launch the Custom Document Editor

  1. Ensure that you have chosen "Custom" as the layout option on your document.
    "Body Layout" for PDF Document formatting
  2. Choose a Template Type. This determines how you will reference questions from the form, but also has an impact on how powerful and easy to configure your documents will be. 


    Template Language Comparison:

    DREL
    (Easy; no-code; but limited to simple documents)
    Handlebars
    (Recommended)
    (Moderate; Basic HTML and CSS; meets most document needs)
    Freemarker
    (Developers only)
    Drag and DropYesNoNo
    CSS FormattingNoYesYes
    Images from Form SubmissionsNoYesYes
    Repeatable Sections NoYesYes
    LoopsNoYesYes
    Conditional FormattingNoYesYes
    VariablesNoNoYes
    Well-DocumentedYesYesNo

  3. Launch the Document Editor from the button below the Template Type dropdown.
    Template selector and document editor launcher
  4. The editor will launch in a new window.

    The Custom Document Editor

  

Design & Preview

The tabs on the left allow you to design and preview your document.

Tabs of the Custom Document Editor

  • CSS (not present for DREL):
    • This is used to provide overall formatting (colors, padding, etc) for your document.
    •  Read more about CSS.
  • HTML/Template:
    • This is used to lay out out the structure if your document (headers, tables, etc) and to tell the document where certain answers in your form should be printed.
  • Preview:
    • Shows an rendered HTML web browser preview of your document. 
    • Note: If you are making an HTML or Word document, be sure to also preview in that format.  Some things, like page breaks, will not show in HTML, but will show on a PDF.  Some HTML and CSS elements are also not supported in static documents. 

 

Reference Data

This tab on the right allows you to select a form, and a previous submission against that form. 

This helps you to easily map answers from your forms into the document, and to preview the document with different data. 

This is helpful to make sure the document works correctly if answers are missing.  This is also helpful if you have conditional formatting, and want to test if the document works well in every scenario. 

 

Using the Document Editor with DREL

Design & Preview

CSS is not applicable for this templating language, but the Template tab contains a WYSIWYGClosed What You See is What You Get. The input looks very similar to the output, which enables you to preview the question text. ("what you see is what you get") HTML Editor.   This makes it easy to lay out your document visually.  You can also modify the source code to edit your HTML directly.

Place DREL to reference your questions, in the place you would like their answers to appear.  Read more about DREL here.


Reference Data

Once you have chosen a form, the form will be described in the Reference Data panel. There will be headers for your pages and sections, with the Question Labels (wrapped in DREL) listed underneath.    You can copy and paste the DREL into the correct places in your document. 

  

Using the Document Editor with Handlebars

Design & Preview

All of the design tabs should be present.  You will need to write CSS and HTML to build your document, but we have many examples available to help you.  

Tabs of the Custom Document Editor

Place the Handlebars references to your questions in the place in the HTML where you would like their answers to appear. 

Reference Data

Once you have chosen a form, the form will be described in the Reference Data panel.  The form's JSON format is described.

Basic

Use the Basic tab for most simple question references.  Read our documentation on how to use Basic Question References.

Advanced

Use the Advanced tab to understand the structure of the form for more advanced documents - such as documents that loop through an entire Repeatable sectionClosed A Repeatable Section is a type of section that contains sets of questions that the field user can answer multiple times, “repeating” the process as needed. For example, the field user can answer the same set of questions for each piece of equipment that they need to inspect.Read about Advanced Question References.

Review our tutorials for common things that customers do with Handlebars in custom documents.