Custom Document Editor

 

Note: This feature is a limited release for clients using Version 2 forms. 

 

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.

    

  [ top ]

 

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 Record 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.  Read the Handlebars documentation here.   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.
      •   Please refer to the public Freemarker documentation. 


    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.

  [ top ]

 

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

 [ top ]

 

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. 

 [ top ]

 

 

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

  [ top ]

 

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.  Read about Advanced Question References. 

 

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

 [ top ]

 

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments