1

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?

2 Answers 2

4

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.

enter image description here

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.

1
  • Is it possible to show success message in same page (not move to next page(thank you page). currently i'm using sitecore form with submit action button. while submit the button, i want to show the success message for above or below submit button. Is there any option to show this message
    – PKH
    Jan 22, 2019 at 18:59
0

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.