How to show a confirmation pop-up on submit of a form | Zoho Creator Help

How to show a confirmation pop-up on submit of a form

Implementing a confirmation pop-up upon submitting a form validates and confirms user actions before proceeding. Users will be prompted with a confirmation dialog box when they submit a record. This enhancement improves the user experience by preventing unintended form submissions and providing an additional layer of validation for critical actions. The following steps can be configured with any of the main forms in your application to display a confirmation pop-up upon submission.
  1. Create a form with the following details to display as the confirmation pop-up.

    Form Name

    Form Link Name

    Field Type

    Field Name

    Field Link Name

    Confirmation Pop-up

    Confirmation_Popup

    (Duplicate this form to create a stateless form named Confirm Submit? with link name Confirm_Submit)

    Notes


    Notes
     
    Notes
    Note: The content in the notes field will be presented to the user along with the pop-up. For example, we have entered the message 'Are you sure you want to submit the form?' 

    Notes

    Multi Line

    Temp Data

    Temp_Data

  2. Navigate to the form properties of the Confirm Submit? stateless form and rename the Submit and Reset buttons to Confirm and Cancel. Change their type from Submit and Reset to Button, as shown.

  3. Create a workflow to hide the Temp_data Multi line field in the Confirm Submit? stateless form, as it is used for internal purposes. Select Form event as Field Rules and name the workflow 'Hide Field'.

  4. Click Add New Action > Hide Fields and select the Temp Data Field, as shown.

  5. Create a new workflow to execute on the successful form submission of your preferred form (Main Form) to show a confirmation pop-up whenever a record is submitted (Created or Edited).

  6. Click Add New Action > Deluge Script and add the following code to the Deluge editor. This retrieves the entered values from the respective fields in the main form and generates a JSON representation. The resulting JSON is then populated into the hidden Temp_Data Multiline field in the Confirm Submit? pop-up form.
    1. //Fetch the added record by matching the ID with the Input records ID.
    2. sourceRecord =<Main_form_link_name>[ID == input.ID];
    3. //Fetch the field link names of all fields in the Asset_Requests form using getFieldNames(); function.
    4. fieldNames = sourceRecord.getFieldNames();
    5. //Create a map variable to store the field link name and its respective values in a JSON format.
    6. jsonObject = Map();
    7. for each  field in fieldNames
    8. {
    9. value = sourceRecord.getFieldValue(field);
    10.  jsonObject.put(field,value);
    11. }
    12. //Convert the JSON to TEXT using toString(); function.
    13. jsonString = jsonObject.toString();
    14. //encode the JSON string to supply the value in the URL parameter.
    15. encoded_json = encodeUrl(jsonString);
    16. //Open the main form by passing the entered values as query parameters before triggering the confirmation pop-up. This helps avoid the emptying of field values upon form refresh after submitting.
    17. openUrl("#Form:<Main_form_link_name>?<Field_link_name_1>="+input.<Field_link_name_1>+"&<Field_link_name_2>="+input.<Field_link_name_2>+"&<Field_link_name_3>="+input.<Field_link_name_3>,"same window");
    18. //Open the Confirm Submit? stateless form in the pop-up and supply the JSON values to the Temp_Data Multiline field.
    19. openUrl("#Form:Confirm_Submit?Temp_Data=" + encoded_json,"popup window","height=300,width=500");
    20. //Delete the submitted record to prevent entries without user confirmation.
    21. delete from <Main_form_link_name>[ID == sourceRecord];

    22. Where,

      <Main_form_link_name>

      is the link name of the form where the confirmation pop-up appears when the user clicks submit.

  7. Create a workflow to execute on Click of a Button in the Confirm Submit? stateless form and select the button as Confirm. Name the workflow as 'Submit Record'.

  8. Click Add New Action > Deluge Script and add the following code in the Deluge editor. This will insert a record in the main form with the fetched input values stored as a JSON in Temp_Data field of the Confirm Submit? pop-up when the user clicks the Confirm button.
    1. //Add the stored JSON data in the Temp Data field as a record in Main form by matching its field link names with the JSON key.
    2. insert into <Main_form_link_name>
    3. [
    4. Added_User=zoho.loginuser
    5. <Field_link_name_1>=input.Temp_Data.getJSON("<Field_link_name_1>")
    6. <Field_link_name_2>=input.Temp_Data.getJSON("<Field_link_name_2>")
    7. <Field_link_name_3>=input.Temp_Data.getJSON("<Field_link_name_3>")
    8. ];
    9. //Redirect the user back to the main form.
    10. openUrl("#Form:<Main_form_link_name>","same window");
  9. Create another workflow to execute on Click of a Button in the Confirm Submit? stateless form and select the button as Cancel. Name the workflow 'Cancel Record'.

  10. Click Add New Action > Deluge Script and add the following code in the Deluge editor. This closes the Confirm Submit? pop-up when the user clicks the Cancel button in the pop-up.
    1. //Close the Confirm Submit? pop-up window.
    2. openUrl("#Script:page.Close ","popup window");
  11. Navigate to the form properties of your main form and clear the content in the Show Message field to prevent the success toast from appearing when users click Submit, ensuring only the confirmation popup is displayed.

See How it Works

  1. Stateless Form
  2. getFieldNames()
  3. encodeURL()
  4. openURL()
  5. Add Records
  6. Delete Records