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:
Select the form and add new dynamic event:
Select Form > Submit:
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:
Right click Steps:
Select Bootbox Dialogs > Confirm. This is a confirmation dialog with two options to choose from - confirm and cancel:
Add a name for this step:
Then add the message to be displayed to the users:
And add a title for the dialog:
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:
Then select a color for it:
We do the same for the cancel button. First we enter the custom text:
Then we select a color for it:
Scroll down, where you can find the dialog styling options. You can customize them as you need:
Then we need to chose what happens if the user clicks the confirm button. Right click Steps under the then condition:
We want to submit the form, so we select Control Flow > Run:
Then click the dynamic action picker button:
And select Submit, below the Form component:
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:
Then Save the flow:
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:
And select Prevent:
Save your page and you are done:
You will see a nice confirmation dialog appearing, when you click the submit button:
