Forms submit - 6 second or more delay

Vote:
 

We have a client using Episerver Forms (4.23). When submitting the form there is a good six second minimum delay before the Thank You page loads. 

They are using the Marketing Connector for Salesforce. Is this just how long it takes? Is there any way to improve the experience outside of a loading gif?

#201526
Feb 21, 2019 18:05
Vote:
 

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

#201529
Feb 21, 2019 18:30
Vote:
 

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 

#201539
Edited, Feb 22, 2019 9:51
Vote:
 

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.

#201592
Feb 22, 2019 19:47
Vote:
 

Good to hear that.

#201614
Feb 25, 2019 3:10
Vote:
 

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>');
}

});
#201702
Feb 27, 2019 18:18
Vote:
 

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
        });
    });
}
#201712
Feb 28, 2019 7:25
Vote:
 

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

#202045
Mar 12, 2019 14:20
Vote:
 

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.

#202244
Mar 20, 2019 20:17
Vote:
 

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.

#203693
May 02, 2019 20:33
Vote:
 

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.

 

#205041
Jun 27, 2019 6:14
Vote:
 

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

#205042
Jun 27, 2019 6:15
KennyG - Jun 27, 2019 16:56
Yes and no. The form is somewhat faster synchronously. We tried it async which was MUCH faster but we realized that kept us from getting the salesforce cookie which we are using so we had to switch back.
Vote:
 

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/.
#205051
Edited, Jun 27, 2019 10:09
Vote:
 

Hi Quan and Eivind,

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

Alex

#205067
Jun 27, 2019 14:02
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.