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
- Ensure that you have chosen "Custom" as the layout option on your document.
- 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
- DREL
- Launch the Document Editor from the button below the Template Type dropdown.
- 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