Should probably also mention that I've set injectFormOwnJQuery="false" and have jQuery loading in the head. 

Hi KennyG,

How long does it take to complete form submission when you disable mapping for salesforce (not pushing data to Salesforce).

Latest versions of MarketingAutomation make MarketingConnectorActor run synchronously(it runs asynchronously in previous versions) .  I think this is the main reason slows down submission process.

You can override ExecuteActors in ActorsExecutingService and register new service to IOC container to make MarketingConnectorActor run asynchronously

using EPiServer.Forms.Core.Models;
using EPiServer.Forms.Core.PostSubmissionActor;
using EPiServer.Forms.Core.PostSubmissionActor.Internal;
using EPiServer.Forms.Implementation.Elements;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;

namespace AlloySample.Customization
{
    public class CustomActorsExecutingService : ActorsExecutingService
    {
        public override IEnumerable<object> ExecuteActors(Submission submission, FormContainerBlock formContainer, FormIdentity formIden, HttpRequestBase request, HttpResponseBase response, bool isFormFinalizedSubmission)
        {
            if (formContainer == null)
            {
                return null;
            }

            var input = formIden;
            var outputs = new List<object>();

            var allActors = GetFormSubmissionActors(submission, formContainer, formIden, request, response, isFormFinalizedSubmission).Where(a => a != null).ToList();
            var orderedActors = allActors.Where(a => a is ISyncOrderedSubmissionActor && !(a is MarketingConnectorActor)).OrderBy(a => ((ISyncOrderedSubmissionActor)a).Order).ToList();

            foreach (var actor in orderedActors)
            {
                var output = RunActor(actor, input);

                // if there is error, stop submitting and show message
                if (output is ISubmissionActorResult && (output as ISubmissionActorResult).CancelSubmit)
                {
                    outputs.Add(output);
                    return outputs;
                }

                outputs.Add(output);
            }

            var actors = allActors.Except(orderedActors).ToList();

            var syncActors = actors.Where(a => a.IsSyncedWithSubmissionProcess && !(a is MarketingConnectorActor));
            var asyncActors = actors.Where(a => !a.IsSyncedWithSubmissionProcess || a is MarketingConnectorActor);

            #region run async actors
            foreach (var asyncActor in asyncActors)
            {
                Task.Run(() =>
                {
                    RunActor(asyncActor, input);    
                });
            }
            #endregion

            #region Run sync actors
            foreach (var actor in syncActors)
            {
                outputs.Add(RunActor(actor, input));
            }
            #endregion

            return outputs;
        }
    }
}

 Hope this help 

Thank you Quan, without Salesforce connected it was around 2 secs. With your code we're now down to around 5-6 seconds (In preprod) instead of the 15-25 secs that the client was seeing. Have also had discussions about streamlining some of the logic on the Salesforce side that happens when they capture a lead.

Good to hear that.

Hey Quan, I'd like to add a loading gif just to let the user know that something is happening. But no matter what it seems the JS onclick waits for the ajax submit (SF call) to happen. Any experience with this?

I've tried both catching the click event and catching the ajaxSend.

$(document).ajaxSend(function( event, jqxhr, settings ) {
if ( settings.url === "/EPiServer.Forms/DataSubmit/Submit" ) {
$('form.EPiServerForms').append('<div class="loader" id="loader"></div>');
}

});

hi KennyG,

You can listen to Form's events to show/hide loading icon

// The full demo script. It works.
if (typeof $$epiforms !== 'undefined') {
    $$epiforms(document).ready(function myfunction() {
        // listen to event when form is about submitting
        $$epiforms(".EPiServerForms").on("formsStartSubmitting", function (data) {
            console.log('----- Form starts submitting ' + JSON.stringify(data));
            // show loading Icon
        });

        // listen to event when form is submitted
        $$epiforms(".EPiServerForms").on("formsSubmitted", function (data) {
            console.log('----- Form is submitted ' + JSON.stringify(data));
            // hide loading Icon
        });

        // formsSubmittedError
        $$epiforms(".EPiServerForms").on("formsSubmittedError", function (data) {
            console.log('---- Could not submit the form  ' + JSON.stringify(data));
            // hide loading Icon
        });
    });
}

Hi KennyG & Quan,

I'm pleased to see you guys hashing this out here as I'm in the same boat as your client KennyG - although we're using the Marketo connector not the SF one.

I've tried implementing your code Quan and I'm not getting the results. It is kinda working, kinda not. Let me explain.

I would like the 'loading icon' to appear when the user clicks the submit button (and get removed on error or completion).

I can see the code I'm adding to the formsStartSubmitting event executing but the loading icon will only be visable if I attach the debugger and set a breakpoint.

It looks to me as though validation is getting in the way.

Without the breakpoint you can click the submit button and you'll wait for a few seconds and then the green validation ticks appear and the page is whisked off to the thank you page.

I've tried attaching the loading icon code to the submit button's click event, but that didn't make any different.

Does your solution above work with validation? Any ideas as to how I can get this working?

thanks,

Alex

Sorry for the delayed response but I've been out of town for a week.

Quan, back to the original async scenario. Your code did seem to speed things up, however, in our testing we did start seeing that the encrypted MAI cookie was no longer getting dropped so we had to back out your async code.

Just something to be aware of.

With update 261 (https://world.episerver.com/releases/episerver---update-261/) there is a new version of the marketing connector so I'm anxious to start testing to see if it makes a difference.

Hi Alex,

I'm so sorry for my very late response because it seems like i did not receive email notification on this topic.

By default, Forms' ajax request runs synchronously and it might be the reason. Please set 

epi.EPiServer.Forms.AsyncSubmit = true;

to run ajax request asynchronously.

Does new version of marketing connector make everything run faster, Kenny ? 

Did you find a solution Alex Brown? 

I had the same problem, and solved it by setting the JavaScript object epi.EPiServer.Forms.AsyncSubmit to true as described above by Quan Tran and here:
https://world.episerver.com/forum/developer-forum/Addons/Thread-Container/2016/5/stylize-form-submit-button/

epi.EPiServer.Forms.AsyncSubmit = true

It also resolved the following warning in the console. 

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Hi Quan and Eivind,

Thank you so much for your help with this. Setting AsyncSubmit worked like a charm! :)

Alex