Quan Tran
Mar 4, 2019
(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>');
    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);

        // listen to event when form is successfully submitted
        $$epiforms(".EPiServerForms").on("formsSubmitted", function (data) {

        // formsSubmittedError
        $$epiforms(".EPiServerForms").on("formsSubmittedError", function (data) {

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
            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


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

Please login to comment.
Latest blogs
How to fix scheduled job 'Remove Abandoned BLOBs' if it keeps failing

Optimizely inlcudes a job named 'Remove Abandoned BLOBs'. This post will help you fix it if it's no longer working.

Henning Sjørbotten | Sep 26, 2023 | Syndicated blog

Optimizely Web Experimentation Metrics

Within the domain of Optimizely Web Experimentation Metrics, the emphasis is on objective key performance indicators (KPIs) selected to assess an...

Matthew Dunn | Sep 23, 2023 | Syndicated blog

Optimizely For you Intranet

Having been at Optimizely and in the CMS industry for nearly 16 years I have seen clients’ intranet requirements go from a simple site just to hous...

Robert Folan | Sep 22, 2023

Vulnerability in EPiServer.GoogleAnalytics v3 and v4

Introduction A potential security vulnerability was detected for Optimizely Google Analytics addon (including EPiServer.GoogleAnalytics and...

Bien Nguyen | Sep 20, 2023