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:

Install & activate "Timber" WordPress plugin
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

Note You might notice that the following is not compliant to CSS as intended by web standards, hence assume there is a mistake here. We assure you there isn't. The CSS implemented in Mpdf does not strictly follow web standards.

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

Adding Header & Footer

Adding Header

Add the below CSS in the <style> tags.

@page { 
   header: html_myHeader; 
}

And the below goes in the HTML:

<htmlpageheader name="myHeader"> 
Here goes your Header Content... eg. Page {PAGENO}/{nbpg}
</htmlpageheader>

Adding Footer

Add the below CSS in the <style> tags.

@page {
   footer: html_myFooter;
}

And the below goes in the HTML:

<htmlpagefooter name="myFooter"> 
Here goes your Footer Content... eg. Page {PAGENO}/{nbpg}
</htmlpagefooter>

Page Breaks

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

Custom Page Size

You can have custom page sizes

@page { sheet-size: 7in 9in; }

Instead of in , cm or mm can be used, but not % em etc. You can also use a named format like sheet-size: A4 landscape; the alternative is either portrait or can be left unspecified.

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.

Upload with Multiple Files

In case the upload field allows for multiple files and you want to display all of them you need a loop. The image locations will be in a string separated by a comma, so we use the filter split. We also use trim to remove trailing spaces in the resulting image locations. All in all:

{% for image in form_raw.upload_field_id|split(',') %}
  <img src="{{image|trim}}">
{% endfor %}

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 }}">

Include Featured Image

To include the featured image use the following code:

<img src="{{ post.thumbnail.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