Live HTML Field is like Elementor HTML field, but it allows you to insert the values of the form fields and show them live as they are updated by the user.
To insert a field type form.field-id inside double curly brackets.
For example:
Hello <b>{{form.name}}</b>!
For fields where you can choose more than one option, like checkboxes, you can define a template that will be repeated for each choice. Example:
You have selected the following options:
<ul>
{{#form.field-id-here}}
<li>{{.}}</li>
{{/form.field-id-here}}
</ul>
If the options selected where 'a', 'b', and 'c', the result would be:
You have selected the following options:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
{{#form.field-id-here}} will begin the repeater, {{.}} will insert the current item, and {{/form.field-id-here}} will end it.
Showing something only if a field is present or only if it isn't
You can use a similar syntax as that shown above:
{{# form.acceptance_field }}
Thank you for accepting the conditions.
{{/ form.acceptance_field }}
{{^ form.acceptance_field }}
You need to accept the conditions in order to proceed.
{{/ form.acceptance_field }}
File Uploads as Images
In the case of File Uploads, if they are images you can display them on the page together with their file name.
To display the image use <img src="{{form.upload_field_id.url}}">, to insert the file name just use {{ form.upload_field_id.name }}.
Replace upload_field_id with the id of your upload field.
As an example the following result
can be obtained with the following code
hi {{form.text}} you have uploaded these images:
{{#form.upload_field_id}}
<figure>
<img src="{{ url }}">
<figcaption>
{{ name }}
</figcaption>
</figure>
{{/form.upload_field_id}}
Checking if uploaded file is an image
If you want to try to show the image only if the upload file type is an image you can use this:
{{# form.upload_field_id.is_image }}
<!-- display image -->
{{/ form.upload_field_id.is_image }}