1. Help Center
  2. Formatting the results

Generate a PDF from an HTML Template

This option creates a PDF document with the form results. The PDF is based on an HTML template you create. In the template, you decide which results to include and how to display them.

Customize the HTML template

 

Use HTML and CSS to create the layout and style for the PDF. Use the data bindings to insert the respondent’s answers in the PDF.

  1. Click anywhere on the DYNAMIC-PDF row. The HTML template is shown on the left. The form’s data bindings are shown on the right. (Click to print the data bindings list.)
  2. Design the HTML template any way you want. Use the data bindings to insert the respondent’s answers. Data binding names must be enclosed in double curly braces. The following example uses a data binding to insert the respondent’s first name:

<p>{ { respondent.firstName } }</p>

This is just one example of how to use double curly braces to render data associated with a data binding.  See the How to use Handlebars in FormHero Studio to learn more.

 

Headers and Footers 

You can also customize headers and footers for generated PDFs. To show or hide headers and footers, or make changes to them, you will need to add the following HTML template after the closing HTML tag.

 

<!-- __PDFRenderOptions__:

{

    "displayHeaderFooter": true,

    "headerTemplate": "<div></div>",

    "footerTemplate": "<div style=\"font-size:9px; margin-left:30px;\">

             Footer(02/02/2020)<br>

             Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span>

     </div>"

 } -->

 

displayHeaderFooter

If you would like to show the header and footer, have the key-value shown as
“True”, otherwise choose “false”.

 

headerTemplate

This is where you can add in the HTML you’d like to be displayed in the header.  The default header is the date.

 

footerTemplate

This is where you can add in the HTML you’d like to be displayed in the footer. The default footer is page and page count.

 

Page Counts

Use the following syntax for data related to pages.

pageNumber : The page number of the current page

totalPages : The total number of pages in the document

 

For Example:

"footerTemplate": "<div style=\"font-size:9px; margin-left:30px;\">

Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span>

</div>"

 

Styling the Header and Footer

Any styling to the header and footer must be done in the <div> of each element in the PDFRenderOptions.  These elements have no visibility into the style section of the document itself.

 

Additional Styling notes

  • If no size is given to the header or footer divs, they will not appear
  • Margin-left of the divs must be at least 30px
  • Font-sizes of the divs should be over 8px
  • You can use handlebars to use data collected in the form

Tip If you would like to show just a header, or just a footer, ensure that the section that will not have content has an empty <div> as the HTML.  Otherwise, the default text will show up (“Header on X page” or “Footer on X page”).

 

Change the filename

The PDF filename is created automatically. The filename uses the prefix generated-, followed by the unique session ID for the form. To change the filename, click generated-{ { . FORMHERO.SESSION_ID } }.pdf, make your changes and click SAVE.

 

Tip  You can use data bindings in the filename. For example, you could use the filename Account Change Form for { { client.firstName } }-{ { client.lastName } }.pdf