GA4 Form_submit Event for Elementor Forms within a Popup

In the “long arc” of Google Analytics history it’s hard to keep up with the constant churn and changes between Google services and the rest of one’s tech stack sometimes. GA4 brought with it some benefit with improved built-in event tracking which really required Google Tag Manager or JavaScript code snippets in the past and was just not as convenient, especially for more simple tagging needs. One of the best built-in event types in GA4 is the form_submit event which detects when an HTML form has been submitted.

Unfortunately, asynconrous form submissions can get in the way of this actually triggering. I discovered this when using an Elementor Page Builder Form element (widget) within an Elementor Popup template on a few sites that I developed. If you are also having this problem give this follow code snippet a try. You can either implement it globally on your website or simply add an HTML widget to the popup template just underneath the form widget and insert the following code. Within 24 hours of form submissions you should see results in GA4.

<script>
jQuery(document).on('elementor/popup/show', function () {
    // Attach a submit event listener to dynamically loaded forms
    document.addEventListener('submit', function (e) {
   // Check if the form being submitted matches your target form
        if (e.target.matches('.elementor-form')) {
            gtag('event', 'form_submit', {
                event_category: 'form',
                event_label: 'popup_form', // Add specific identifiers as needed
            });
        }
    });
});
</script>

The code above basically adds an event listener and event tag. The elementor/popup/show event is a custom event triggered by Elementor when a popup is displayed on the page. If you want more specificity than the .elementor-form selector you can add a form ID (eg. #my-form) to the form widget and change this selector.

If the above doesn’t work (say for example Elementor decided to change the event listener down the line), I also got this one to work which is a simplified version. Either works… so far 😛

<script>
document.addEventListener('submit', function (e) {
    // Check if the form being submitted matches your target form
    if (e.target.matches('.elementor-form')) { 
        // Trigger GA4 event
        gtag('event', 'form_submit', {
            event_category: 'form',
            event_label: 'popup_form', // Add specific identifiers as needed
        });
    }
});
</script>

Once you do this you can visit the Event UI in GA4 and flip the toggle to turn the event into a Key Event. Once you do that it will appear in reports but more importantly it can then be imported into Google Ads via the Conversions > Import > Import from GA4 tools. I use this to then make custom conversion goals for specific campaigns.