Track form events in Google Tag Manager for analytics and conversion tracking.
Push Form Events to the Data Layer
The front-end script fires two jQuery events on the form: formforge:submission-success and formforge:submission-error. They are jQuery events, so document.addEventListener does not receive them; listen with jQuery on the document. The form id is in the data-form-id attribute of the form wrapper. The events carry no form title and there is no step event.
add_action( 'wp_footer', function () {
?>
<script>
window.dataLayer = window.dataLayer || [];
jQuery( document ).on( 'formforge:submission-success', '.formforge-form', function () {
window.dataLayer.push( {
'event': 'formforge_submission',
'formId': jQuery( this ).closest( '.formforge-wrap' ).data( 'form-id' )
} );
} );
jQuery( document ).on( 'formforge:submission-error', '.formforge-form', function ( event, response ) {
window.dataLayer.push( {
'event': 'formforge_error',
'formId': jQuery( this ).closest( '.formforge-wrap' ).data( 'form-id' ),
'fieldId': response && response.field_id ? response.field_id : ''
} );
} );
</script>
<?php
}, 99 );The late priority puts the script after jQuery. The error event also fires when the browser refuses a field before anything is sent, and it carries the field id in field_id when there is one.
GTM Trigger Configuration
Create a Custom Event trigger in GTM:
| Trigger Name | Event Name | Fires On |
|---|---|---|
| Fillin Forge Submission | formforge_submission | All Custom Events |
| Fillin Forge Error | formforge_error | All Custom Events |
Google Analytics 4 Conversion Tag
Create a GA4 Event tag in GTM:
Tag Type: Google Analytics: GA4 Event
Event Name: form_submission
Parameters:
form_id: {{DLV - formId}}
Trigger: Fillin Forge SubmissionThe event has no form title. If you want one in GA4, map the form id to a title with a lookup variable in GTM.