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

{% hint style="info" %}
Please refer to [HandleBars guide ](https://handlebarsjs.com/guide/)to see what you can do with HandleBars for your templates.
{% endhint %}

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

<figure><img src="/files/rTHM2kWZs5yrwVGJ27wf" alt=""><figcaption></figcaption></figure>

### 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:

<figure><img src="/files/VPUk6GhlDSZhYJ6acvhu" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/PFaS7ACsDw6Bb0d2QbeT" alt=""><figcaption></figcaption></figure>

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

&#x20;

<figure><img src="/files/vOLIS1r8wcOKl8KrbSli" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Y2vYNYhksQ3hTvgUxk2m" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

<figure><img src="/files/xTyBxxI5T4uDyhAt5GS0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you double-click on a field on the list, it will be placed to the cursor position in the HTML template editor.
{% endhint %}

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flexiforms.gitbook.io/knowledgebase/essentials/templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.