On Sitecore form submit show pop up with yes or no button and clicking Yes save the form data

Question

I have a requirement where on Sitecore form submit, I have to show a pop up with Yes/No option. And once I click Yes, it would call save the form data.

Note: we are already using Sitecore form. and CSaveaction is working fine. But now have to add a pop up on submit and from pop up call save action.

So please suggest how to achieve. Thank you.

Answer 1

I would suggest creating a custom Submit button and binding the JS event on the cshtml.

The csthml will look like the one below, where you can bind the confirmation box by clicking on the button. You need to follow the blow code and remove the logic and put the confirmation logic before submitting.

@using Sitecore.ExperienceForms.Mvc.Constants
@model Sc.FormsCustomScripts.Models.CustomScriptButtonViewModel
 
@{
    var cssClass = Model.CssClass;
    if (Model.NavigationStep < 0)
    {
        var classes = Model.CssClass.Split(' ');
        if (!classes.Contains("cancel", StringComparer.OrdinalIgnoreCase))
        {
            if (!string.IsNullOrEmpty(Model.CssClass))
            {
                cssClass += " ";
            }
 
            cssClass += "cancel";
        }
    }
}
 
<input value="@Html.DisplayTextFor(t => Model.Title)" type="submit" class="@cssClass" name="@Html.Name(Model.ItemId)" data-sc-field-key="@Model.ConditionSettings.FieldKey" />
@Html.Hidden(AttributeNames.NavigationButtons, Model.ItemId)
@Html.Hidden(Model.ItemId, Model.NavigationStep)
 
<script type="text/javascript">
    (function ($) {
        var $inputEl = $("input[name='@Html.Name(Model.ItemId)']");
        var $formEl = $inputEl.closest('form');
        if ($inputEl.length == 0 || $formEl.length == 0) {
            return;
        }
        $inputEl.click(function () {
            $("input[type=submit]", $formEl).removeAttr("clicked");
            $(this).attr("clicked", "true");
        });
        @if (Sitecore.Context.Site.Name != "shell")
        {
            if (!string.IsNullOrWhiteSpace(Model.FormSubmitScript)) 
            { 
                <text>
                    $formEl.on("submit", function () {
                        if ($inputEl.attr('clicked')) {
                            @Html.Raw(Model.FormSubmitScript)
                        }
                    });
                </text>
            }
        }
    })(jQuery)
</script>

To know more about the custom submit event, refer to this article.

https://smartsitecore.com/en/call-custom-javascript-on-sitecore-forms-submit/