Enfold Contact Form – GTM Event Not Firing

Hi,

Is there a test page we can check? We would like to verify if the dataLayer.push is actually triggered when the submit button is clicked. Please create a test page and provide the site URL in the private field.

Best regards,
Ismael

Hi,

The function is not triggered when the submit button is clicked, probably because the contact form does not have a unique ID (form_id) and the form_url is not properly set in the trigger. Please review the video around the 4-minute mark and make sure that a custom trigger is created for the event.

— https://youtu.be/QmEOPuJr05w?t=246

To apply an ID to the contact form, edit the contact form element, go to the Advanced > Developer Settings, and look for the Custom ID Attribute field.

View post on imgur.com

Again, make sure to configure the event trigger as shown here: https://youtu.be/QmEOPuJr05w?t=246

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

We may need to log in to the site to properly check this, and we recommend hiring a developer or specialist to help you correctly set up your GTM events and integrate them with the contact form.

In the meantime, try to remove the submit button filter and replace it with this code.

// trigger gtm event when the form is submitted
add_action( 'wp_footer', function () {
	?>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
		if (typeof window.dataLayer === 'undefined' || !Array.isArray(window.dataLayer)) {
			console.warn('dataLayer is not available. Skipping form submission tracking.');
			return;
		}

		const responseEl = document.getElementById('ajaxresponse_1');
		if (!responseEl) return;

		const observer = new MutationObserver(function (mutationsList) {
			for (const mutation of mutationsList) {
				if (
					mutation.type === 'attributes' &&
					(mutation.attributeName === 'class' || mutation.attributeName === 'style')
				) {
					const isVisible = !responseEl.classList.contains('hidden') && responseEl.style.display !== 'none';

					if (isVisible) {
						window.dataLayer.push({ event: 'form_submission' });
						console.log('dataLayer push: form_submission');
						observer.disconnect();
						break;
					}
				}
			}
		});

		observer.observe(responseEl, {
			attributes: true,
			attributeFilter: ['class', 'style']
		});
	});
	</script>
	<?php
}, 9999 );

Let us know the result.

Best regards,
Ismael