Google Tag Manager #

It's common to want to trigger data layer events through Google Tag Manager after a form has been submitted. How you'll go about this will depend on what type of form submission you have, and what type of Action on Submit behaviour you have set.

This is specifically for Google Tag Manager and triggering data layer events, but can be applied to any post-submission processes.

Page Reload #

If your form is set to Page Reload, you can use the following to detect whether the form has been submitted. This will take into account multi-page forms, and will only be true when a form is completed.

{% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}

{{ craft.formie.renderForm(form) }}

{% set submitted = craft.formie.plugin.service.getFlash(form.id, 'submitted') %}

{% if submitted %}
    {% js %}
        window.dataLayer = window.dataLayer || [];
        
        dataLayer.push({
            event: 'formSubmission',
            formType: '{{ form.title }}',
        });
    {% endjs %}
{% endif %}

The content of dataLayer.push() is totally up to you and your requirements. The above is purely a common example.

If you set your Action on Submit behaviour to a redirect, you should ensure that the dataLayer code is on that page. As such, you wouldn't require the submitted check.

Ajax #

For Ajax enabled forms, you'll need to employ JavaScript in a further capacity to listen on the form submission event, then push the same code to the dataLayer.

{% set form = craft.formie.forms({ handle: 'contactForm' }).one() %}

{{ craft.formie.renderForm(form) }}

{% js %}
    let $form = document.querySelector('#{{ form.getFormId() }}');

    $form.addEventListener('onAfterFormieSubmit', (e) => {
        e.preventDefault();

        if (e.detail.nextPageId) {
            return;
        }

        window.dataLayer = window.dataLayer || [];
    
        dataLayer.push({
            event: 'formSubmission',
            formType: '{{ form.title }}',
        });
    });
{% endjs %}

Here, we're listening to the onAfterFormieSubmit event in JavaScript, which is fired every time the form is submitted and saved with Formie. You'll notice the if (e.detail.nextPageId) check, which is for multi-page forms. As stated, this event is fired on every page submission (as each page's content is saved), but we only care about when the form submitted successfully on the last page. This check will ensure that.

Get started with Formie

Available for Craft 3. Get it from the plugin store.