Discuss

Displaying a Confirmation Dialog on Form Submit

On this page

You can add a Bootstrap 4 styled confirm dialog when submitting a form, using the Flow Component and Bootbox Dialogs integrated in it. This is useful in cases like for example forms with many inputs, when you want to avoid users submitting wrong details accidentally.

We created our server connect form, which submits data to a server action which we then process, store in a database or send via email:

Screenshot_1|690x414

Select the form and add new dynamic event:

Screenshot_2|690x414

Select Form > Submit:

Screenshot_3|690x414

You can either create a new flow, in the App Structure and call it later, or create an inline flow to be used just for this form. In our case we will only need the flow for this form, so we click the inline flow button:

Screenshot_4|690x414

Right click Steps:

Screenshot_5|690x414

Select Bootbox Dialogs > Confirm. This is a confirmation dialog with two options to choose from - confirm and cancel:

Screenshot_6|690x414

Add a name for this step:

Screenshot_7|690x414

Then add the message to be displayed to the users:

Screenshot_8|690x414

And add a title for the dialog:

Screenshot_9|690x414

You can customize the default confirm and cancel buttons text and colors. By default they will show OK and Cancel. So just enter your custom text for the confirm button:

Screenshot_10|690x414

Then select a color for it:

Screenshot_11|690x414

We do the same for the cancel button. First we enter the custom text:

Screenshot_12|690x414

Then we select a color for it:

Screenshot_13|690x414

Scroll down, where you can find the dialog styling options. You can customize them as you need:

Screenshot_14|690x414, 100%

Then we need to chose what happens if the user clicks the confirm button. Right click Steps under the then condition:

Screenshot_15|690x414

We want to submit the form, so we select Control Flow > Run:

Screenshot_16|690x414

Then click the dynamic action picker button:

Screenshot_17|690x414

And select Submit, below the Form component:

Screenshot_18|690x414

Make sure to enable the "Direct" option. This will submit the form, without triggering the submit event which is what we need here. Click Select:

Screenshot_19|690x414

Then Save the flow:

Screenshot_20|690x414

Then we need to prevent the default submit event for the form, so that it only gets submitted after the user clicks the confirm button in the confirmation dialog. Open the Modifiers dropdown:

Screenshot_21|690x414

And select Prevent:

Screenshot_22|690x414

Save your page and you are done:

Screenshot_23|690x414

You will see a nice confirmation dialog appearing, when you click the submit button:

flow-confirm|690x422