Custom PDF, Word, and HTML Documents

• About
• Launch the Custom Document Editor
• Design & Preview
• Reference Data
• Using the Editor with DREL
• Using the Editor with Handlebars 

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.
   
   
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. 
   
   
   • DREL Data Reference Expression Language (DREL) is used to get form data and metadata and add it to a string, such as dates, usernames, or answers to questions in forms. (Data Reference Expression Language):
     
     • ProntoForm's reference language. See our documentation.
     • No-Code Document Editor
     • The simplest to use for very simple documents built by non-technical users, but more limited functionality.  
       
   • Handlebars (Recommended):
     • A common templating language, simple enough for interested non-developers to learn the basics fairly quickly. We also have many examples to help you, and our support team is equipped to help as well. 
     • HTML and CSS Document Editor
     • Powerful enough for most documents
   • Freemarker:
     • Best suited to Developers, but the most powerful. 
     • ProntoForms has limited documentation, and our support team has limited resources to assist.

   
   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 Drop	Yes	No	No
   CSS Formatting	No	Yes	Yes
   Images from Form Submissions	No	Yes	Yes
   Repeatable Sections	No	Yes	Yes
   Loops	No	Yes	Yes
   Conditional Formatting	No	Yes	Yes
   Variables	No	No	Yes
   Well-Documented	Yes	Yes	No

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

   

Design & Preview

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

• CSS (not present for DREL):
  • This is used to provide overall formatting (colors, padding, etc) for your document.
• 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 WYSIWYG 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.  

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

• Print out All Questions/Answers in a Regular Section
• Print all Repeatable Section Entries in a Table
• Conditionally Include Answers
• Add Conditional Formatting