With Confirm Dialog for Elementor Pro Form, you can avoid accidental form submissions and ask the users to confirm the form values before submission.
It is useful in case you have really long form with many fields and you want to confirm some of the important field values with the user before he/she submits it.
How to Use Confirm Dialog
Enable the confirm dialog option in your form, add a title, content and choose a theme to show the dialog.
Title
In the title of your dialog(modal with actions) you can use:
Confirm Details / Please Confirm / Verify Details
Are you sure to submit the below details?
You are about to send/submit the below details
Verify the Details Before Submit
Content
In the content, you can use the syntax as in the Live HTML Field.
Below is how to use Form Fields in the Content:
For Simple Text, Number, Email or Select Field with one Value
{{ form.field-id }}
For Field Containing Multiple Values, such as checkbox, radio, or a multi-select field
{{#form.field-id}}
{{.}}
{{/form.field-id}}
You can wrap the results as below
<ul>
{{#form.field-id}}
<li>{{.}}</li>
{{/form.field-id}}
</ul>
To show some content when the field is checked or unchecked, i.e. for acceptance field
{{# form.field-id }}
Thank you for accepting the conditions.
{{/ form.field-id }}
{{^ form.field-id }}
Please accept the conditions to continue.
{{/ form.field-id }}
For File Uploads (if they are Images):
To display the image: <img src="{{form.field-id.url}}">,
To insert the file name: {{ form.field-id.name }}.
In order to check if the file is an image:
{{# form.field-id.is_image }}
<!-- display image -->
{{/ form.field-id.is_image }}
Theme
There are a couple of themes to choose from as shown below.
