How to show a loading image mean while a submit form is being executed in Sitecore 9 Forms

Question

Currently I have a form (created using Sitecore 9 Forms not with WFFM module) and on submit (custom submit action button). While clicking submit button, I have to show the loading image in the client side whenever a Background server operation is in progress.

How can I do this with Sitecore 9 Forms?

Answer 1

You can add some javascript on your webpage to listen on your submit button and show a loader icon.

To have some handles, you can add custom css classes on your submit buttons.

This can be done, either by adding them by the contenteditor.

Or you could also edit the Website\Views\FormBuilder\FieldTemplates\button.cshtml file to make it hardcoded.

$(".showLoader").click(showLoader());

Note that you can add css-classes on almost all components of the Sitecore Forms feature.

Answer 2

I know this is old, but I faced the same issue working on Sitecore 9.1.1 with Sitecore Forms. (This is how I landed here actually).

Sitecore Forms uses jQuery Ajax Unobtrusive, which uses some data attributes to handle different Forms actions. You can know more about this here https://www.learnrazorpages.com/razor-pages/ajax/unobtrusive-ajax

The one I'm interested in is "data-ajax-begin" which Gets or sets the name of the JavaScript function to call immediately before the page is updated.

So the idea is to define a function that does the animation in that data attribute.

Sitecore uses InitializeAjaxOptions pipeline to initialize these data attributes.

public class InitializeAjaxOptions : MvcPipelineProcessor<RenderFormEventArgs>
{
    private readonly IFormRenderingContext _formRenderingContext;

    public InitializeAjaxOptions(IFormRenderingContext formRenderingContext)
        {
            Assert.ArgumentNotNull((object) formRenderingContext, nameof (formRenderingContext));
  this._formRenderingContext = formRenderingContext;
        }

    public override void Process(RenderFormEventArgs args)
        {
             Assert.ArgumentNotNull((object) args, nameof (args));
             if (!args.ViewModel.IsAjax)
                return;
             if (args.HtmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled)
                 {
                     IDictionary<string, object> unobtrusiveHtmlAttributes = new AjaxOptions()
    {
      HttpMethod = "Post",
      InsertionMode = InsertionMode.ReplaceWith,
      UpdateTargetId = args.FormHtmlId,
      OnSuccess = FormattableString.Invariant(FormattableStringFactory.Create("$.validator.unobtrusive.parse('#{0}');$.fxbFormTracker.parse('#{1}');", (object) args.FormHtmlId, (object) args.FormHtmlId))
    }.ToUnobtrusiveHtmlAttributes();
    foreach (string key in (IEnumerable<string>) unobtrusiveHtmlAttributes.Keys)
      args.Attributes[key] = unobtrusiveHtmlAttributes[key];
  }
  if (!args.IsPost)
  {
    args.QueryString.Add("fxb.FormItemId", (object) args.ViewModel.ItemId.ToGuid());
    args.QueryString.Add("fxb.HtmlPrefix", (object) this._formRenderingContext.Prefix.Trim('.'));
  }
  args.RouteName = "FormBuilder";
}
}

So I created a new pipeline to replace it, which would add the data attributes I need. I added this line (OnBegin = “OnBegin”) which will add the data-ajax-begin attribute to all forms, with the value “OnBegin” which is the JavaScript function I’ll need to write.

The JavaScript function is very simple I’ll just select all buttons with a specific class, and add another class.

 OnBegin = function (xhr) {            
        $(".loader-button").addClass("loader");
    }

With help of a Front End developer, I added the CSS rules that will create the animation when the user submits the form.

Of course, don’t forget to add the patch configuration file for the new pipeline.

<forms.renderForm>      
    <processor type="Sitecore.ExperienceForms.Mvc.Pipelines.RenderForm.InitializeAjaxOptions, Sitecore.ExperienceForms.Mvc">
      <patch:attribute name="type">ProjectX.Feature.Forms.Pipelines.RenderForm.InitializeAjaxOptions, ProjectX.Feature.Forms</patch:attribute>
    </processor>
  </forms.renderForm>

That’s it, and it worked as expected.

Here is the full blog I wrote about it as well. http://jaffal.me/show-progress-indicator-while-submitting-sitecore-form/