Can you access window object when intercepting form submit?

martin.aedma

Vote:

I tried to addEventListener to form from FormContainerBlock.ascx with a code like this, I tried about a 100 different little variations but no matter what, I could never get event to fire during submission.

<form method="post" novalidate="novalidate"
          data-f-metadata="<%: Model.MetadataAttribute %>"
          enctype="multipart/form-data" class="EPiServerForms <%: validationCssClass %> clearfix form-horizontal" data-f-type="form" id="<%: Model.Form.FormGuid %>">

    <script>
        const guid = "<%: Model.Form.FormGuid %>";
        const addEventHandlers = () => {
            $$epiforms('.EPiServerForms#' + guid).on('formsSubmitted', function (event) {
                console.log("intercepted");
            });
        }
        
        if (typeof $$epiforms !== 'undefined') {
            console.log("epiforms exist");
            $$epiforms(document).ready(addEventHandlers);           
        }       
    </script>

The only thing that acctually intercepted submission was this code

[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class FormEventsInit : IInitializableModule
{
    public void Initialize(InitializationEngine context)
    {
        FormsEvents.Instance.FormsSubmitting += Instance_FormsSubmitting;
    }

    private void Instance_FormsSubmitting(object sender, FormsEventArgs e)
    {
        // The event fires before the data is submitted so there is an opportunity to interact here
        var formData = e.Data;
    }

    public void Uninitialize(InitializationEngine context) { }
}

What I need to do is to add some data realted to google analytics when form is submitted. So I need to access window.dataLayer object, whis is present then. I thought I'd be able to intercept through script and add it then but not working yet. I can intercept submission via IInitializableModule, however can window be accessed here ?

#303617

Jun 16, 2023 11:15

Paul Gruffydd

Vote:

Hi,

As you're looking to add data to GA's data layer, you'll need to do that in your client-side JavaScript so the server-side code wouldn't work.

I suspect the reason your JavaScript isn't working is due to the order in which scripts render on the page. Looking at the code, I'm assuming you've added the JavaScript to your form block so it will be rendered before the Epi Forms library has been loaded and hence $$epiforms will always be undefined at the point where it's checked. Also, because of the scope of "guid" and "addEventHandlers" you're going to be limited to one form on any given page.

To avoid the scoping issue and attach your events after the forms JS has loaded, you'd need to replace your JS with something like this in your form container block:

 <script>
        document.addEventListener('DOMContentLoaded', function () {
            $$epiforms('.EPiServerForms#@Model.Form.FormGuid').on('formsSubmitted', function (event) {
                console.log("intercepted");
            });
        });
  </script>

#303625

Jun 16, 2023 18:03

Paul McGann (Netcel)

Vote:

Hi Martin,

I agree with Pauls method and it is probably the easiet way to do it.

An alternative however would be to create you own submit element 'SubmitGoogleDataLayer' then you would be able to use form element resources to add you own resources js and markup.

https://docs.developers.optimizely.com/content-management-system/v1.2.0-forms/docs/creating-form-element-with-validator.

Paul

#303742

Jun 19, 2023 9:00

martin.aedma

Vote:

Thank you!
I did manage to get it working finally, I ended up using window.addEventListener('load') instead of document.addEventListener('DOMContentLoaded')

#303745

Jun 19, 2023 9:51