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.

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

Did this answer your question?