The HTML Converter is included in the extension PDF Generator for Elementor PRO Form from version 2.0.0.

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.

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

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 in 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 however 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 field that have multiple selection, 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>

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

Including Signature Field

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

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

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

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.

Did this answer your question?