HTML Templates

HTML Templates are used for emails and exports to specify the layout of the email or PDF and HTML files. They refer to form fields in HTML elements such as paragraph (<p>) or ordered list (<o>).

Apart from HTML syntax, FlexiForms uses HandleBars syntax to replace the form field values in the HTML elements.

Please refer to HandleBars guide to see what you can do with HandleBars for your templates.

Example Template Code

An example template is as follows:

<p>
    Hi There,
</p>
<p>
    {{verification_fullname}} has given the following testimony for {{employee}}.
</p>
<h3>
    Testimony
</h3>
<p>
    {{testimony}}
</p>
<p>
    [Testimony cycle:{{testimony_cycle}}]
</p>

This email template code tells us that:

• The text "Hi There" will be in the first paragraph (<p> is the paragraph element in HTML)

• the value of the verification_fullname field on the form should preceed "has given the following testimony for {{employee}}". So, if the verifiction_fullname is "Robert Ludlum" and the employee value is "Carla Grand", then the text "Robert Ludlum has given the following testimony for Carla Grand".

• The text "Testimony" will be displayed a third level header.

• The answer to the Testimony question will follow the header in a pragraph.

• The email will end with [Testimony cycle:2025-4] if the value of the testimony_cycle field is "2025-4".

When the button titled "preview" is clicked, the following HTML content is displayed based on the discussed template code.

Referring to Complex Field Values

If a complex field (the question that can store multiple values) is used in the form, such as a dynamic panel, we need to access each value using HandleBars helper "#each", as in the following example:

#each helper example

Photos:

{{#each photos}}

    {{name}}

    Name: {{name}}

    Type: {{type}}

{{/each}}

In this examples, we are iterating over the files uploaded via an multi-file upload question and displaying them. Here is the HTML content preview:

Using Helpers Button to Get Help

When the helpers button is clicked, you can see many examples to HandleBars helpers. You can play around with the code and see the result immediately. The code provided would probably include example uses of more helpers than you would need.

Using Auto-Template

Auto-template button generates either table-based or title:value based templates for you. It is typically used to include all the form fields to the template in a structured layout. Then you can modify the template code according to your needs.

Available Form Fields

As can be seen from below, a list of available fields are present for you to refer to in the Template page.

When you double-click on a field on the list, it will be placed to the cursor position in the HTML template editor.

Note please that the form field list does not only contain the question in the form design but also other fields such as "form_id", form_data_id and testimony_cycle. In the next section we will see what kind of fields are available for FlexiForms when a field name is required for Templates, Verification and Jobs.