Take the community feedback survey now.

Quan Tran
Mar 4, 2019
  9504
(7 votes)

EPiServer.Forms show loading icon

When submission process takes a long time to complete, a loading icon should be shown just to let users know something is happening. It is easily done with EPiServer.Forms

  1. Create FormStyle.css file to write cutom style for form and put it under ~/ClientResources/Styles folder. 
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
    margin: 0;
}

.loading .modal {
    overflow: hidden;
}

.loading .modal {
    display: block;
}

2. Create a file name FormScript.js and put it under ~/ClientResources/Scripts folder. We will hook into Form's events to show/hide loading icon

if (typeof $$epiforms !== 'undefined') {

    var $body = $("body");
    var $loadingDiv = $('<div class="modal"></div>');
    $body.append($loadingDiv);
    epi.EPiServer.Forms.AsyncSubmit = true;

    $$epiforms(document).ready(function myfunction() {
        // listen to event when form is about submitting
        $$epiforms(".EPiServerForms").on("formsStartSubmitting", function (data) {
            //var $formContainer = $('#' + data.workingFormInfo.Id);
            //$formContainer.addClass("loading");
            $body.addClass('loading');
        });

        // listen to event when form is successfully submitted
        $$epiforms(".EPiServerForms").on("formsSubmitted", function (data) {
            $body.removeClass('loading');
        });

        // formsSubmittedError
        $$epiforms(".EPiServerForms").on("formsSubmittedError", function (data) {
            $body.removeClass('loading');
        });
    });
}

3. Register external client resources that we just created above to EPiServer.Forms.

using System;
using System.Collections.Generic;
using EPiServer.Forms.Implementation;
using EPiServer.ServiceLocation;

/// <summary>
/// Register client resources to EPiServer.Forms
/// </summary>
[ServiceConfiguration(ServiceType = typeof(IViewModeExternalResources))]
public class ViewModeExternalResources : IViewModeExternalResources
{
    public virtual IEnumerable<Tuple<string, string>> Resources
    {
        get
        {
            var arrRes = new List<Tuple<string, string>>();
            arrRes.Add(new Tuple<string, string>("script", "/ClientResources/Scripts/FormScript.js"));
            arrRes.Add(new Tuple<string, string>("css", "/ClientResources/Styles/FormStyle.css"));

            return arrRes;
        }
    }
}

When form is submitting, the page will look like this

Note: If submission process does not take long we might not see the loading icon. In this case, debug on dev tools to see the result.

Mar 04, 2019

Comments

KennyG
KennyG Mar 4, 2019 02:57 PM

Wonder where you got this idea? :)

Quan Tran
Quan Tran Mar 5, 2019 07:26 AM

Hi KennyG,

From your post regarding Salesforce Marketing Automation :D

Parshant
Parshant Jun 2, 2025 07:18 AM

Hi Quan,

Thank you for the helpful article on showing a loading icon with Episerver Forms.

I attempted to implement the solution using the following package versions:

  • EPiServer.CMS Version 12.29.0

  • EPiServer.Forms Version 5.9.1

However, it seems that the JavaScript event listeners (formsNavigationNextStep and formsNavigationSubmit) are not being triggered at all in my setup. I’ve verified that the script is loading, but the events are never fired.

Has there been any change in the Forms module or event model that might cause this in the newer versions? I'd appreciate any insights or alternative approaches to achieve the loading indicator behavior.

Best regards,

Please login to comment.
Latest blogs
Get last edited content from Optimizely CMS

Learn how to query the last updated blocks and pages from Optimizely CMS

Tomas Hensrud Gulla | Oct 4, 2025 |

Optimizely CMS - Learning by Doing: EP04 – Create Content Models

  Introduction I am thrilled to announce the release of Episode 4 of my  Learning by Doing : Build Series on Optimizley CMS 12 on YouTube ! This...

Ratish | Oct 2, 2025 |

A day in the life of an Optimizely OMVP - Opticon London 2025

This installment of a day in the life of an Optimizely OMVP gives an in-depth coverage of my trip down to London to attend Opticon London 2025 held...

Graham Carr | Oct 2, 2025

Optimizely Web Experimentation Using Real-Time Segments: A Step-by-Step Guide

  Introduction Personalization has become de facto standard for any digital channel to improve the user's engagement KPI’s.  Personalization uses...

Ratish | Oct 1, 2025 |