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 activate Dynamic Shortcodes.
Install & activate "Dynamic Shortcodes" WordPress plugin. Users of Dynamic Content for Elementor can benefit from a special version of the Dynamic Shortcodes plugin, included with their license. More info…
Set the preview data:
Once your HTML template is ready, you can assign it in the PDF Generator settings.
Previously, HTML Converter also worked with the Timber plugin. The functionality is deprecated but not removed. You can convert templates with Dynamic Shortcodes syntax and remove Timber.
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-column 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 {data:page-number} of {data:number-of-pages}
</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 {data:page-number} of {data:number-of-pages}
</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 an Elementor Template, which is easier but has more limitations. In this case, you can create a template 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 from field ID is 'animals') :
<ul>
{for:animal {form:animals @raw}
[<li>{get:animal}</li>]
}
</ul>
Using ACF Fields
To get an ACF Field, you can use the following syntax:
{acf:field}
To display an image from an ACF Field, you should use the following:
<img src="{media:file-path @ID={acf:field}}">
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:field-id @raw}">
Customizing the code allows you to adjust the image width, height, and other properties.
Upload with Multiple Files
If 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. We also use trim to remove trailing spaces in the resulting image locations.
{for:image {form:upload-field-id@raw|-explode(',')}
[<img src="{get:image|trim}">]
}
Including an Image from the Library
Navigate to Media Library and select an image to find its ID (in this case, it is 5296).
Then you can use the image like this:
<img src="{media:file-path @ID=5296}">
Include Featured Image
To include the featured image, use the following code:
<img src="{media:file-path @ID={post:featured-image-id}}">
Conditional Display of Form Fields
You can even show a form field in the PDF only when a certain condition is met. More info...
Including Signature Field
In order to use a signature in your template, you can use the following:
<img src="{form:signature-field-id @raw}">Replace "signature_field_id" with your original signature field ID