The HTML Converter is included in the extension PDF Generator for Elementor Pro Form.

To create an HTML Template to be assigned in the PDF Generator, you can navigate to Dynamic.ooo > HTML Templates

You will find as an example some HTML Code already in the HTML section.

To Preview the PDF based on HTML Code, you should:

  1. Install & activate "Timber" WordPress plugin

  2. Set the preview data:

Once your HTML template is ready, you can assign it in the PDF Generator settings.

Timber Templates

The HTML code is actually processed by Timber, so you have all the power of Timber in your templates! If you don't know how to use Timber please check this brief guide from Timber Documentation.

Having Multiple Columns

You can have multiple columns in your HTML template by using a class with the following CSS properties:

.multi-column {
display: float;
float: left;
width: 50%;
}

Now you can have a two columns layout like this:

<div class="multi-column">Elements for left column</div> 
<div class="multi-column">Elements for right column</div>

To have 3 columns, keep the CSS width property value 33% and you can use the columns thrice. For the four-column layout, you can keep the value 25%.

Page Breaks

You can use the special HTML tag <pagebreak> or the standard CSS properties page-break-before and page-break-after.

Supported CSS

The HTML template does not support all web CSS features. Check the supported CSS features here

Fonts

You can use core fonts or custom fonts in your "font-family" CSS property. There are three available core fonts, ctimes, chelvetica, ccourier. You can add custom fonts to the Elementor Custom Fonts menu page to use them, only the TTF type is supported.

Get HTML from Elementor Template

You can also get the HTML from Elementor Template which is easier but has more limitations. You can create a template in this case and then assign it by enabling the Elementor Template Toggle in the HTML section.

Returning your Form Fields in Template:

To insert the field value of a field with ID "name" use

{{ form.name }}

To insert the field values of fields that have multiple selections, like a checkbox, then you can use the following loop (here the checkbox form field ID is 'animals') :

<ul>
{% for item in form_raw.animals %}
<li>
{{ item }}
</li>
{% endfor %}
</ul>

Using ACF Fields

To get an ACF Field you can use the following syntax:

{{ post.my_acf_field }}

To display an image from an ACF Field you should use:

<img src="{{ Image(post.meta('my_acf_image')).file_loc }}">

check Timber documentation for more information.

Including an Image from the file uploaded

You can use the field type "File Upload" to allow uploading an image.

Now remember the field ID to later use in the HTML template like below:

<img src="{{form_raw.field_id}}">

You can easily adjust the image width, height, and other properties by customizing the code.

Including an Image from Library

Navigate to Media Library and select an image to find its ID.

Then you can use the image like this:

<img src="{{ Image(5296).file_loc }}">

Conditional Display of Form Fields

You can show a form field in the PDF only when a certain condition is met. The pattern to do this is the following:

{% if <CONDITION> %} 
<HTML>
{% endif %}

Conditions are the same as the ones that can be built with the Conditions Generator. For example, the following will print the item price field only if the price is greater than zero.

{% if form.item_price > 0 %} 
{{ form.item_price }}
{% endif %}


Including Signature Field

In order to use a signature in your template you can use:

<img src="{{ form_raw.signature_field_id }}">

Note: Replace "signature_field_id" with your original signature field ID

Did this answer your question?