If you’re using Elementor Pro forms on your WordPress site and want to track submissions as conversions in Google Analytics, Facebook Ads, or other platforms, you’ll need to set up event tracking through Google Tag Manager. Here are three different methods—pick the one that works best for your setup.
Method 1: Basic Event Listener (Simplest)
This is the easiest method if you just need to know when any Elementor form is submitted.
javascript
<script>
jQuery(document).ready(function($){
jQuery(document).on('submit_success', function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'elementorFormSubmitted'
});
});
});
</script>Pros: Simple, clean, works immediately
Cons: No form-specific data captured
Method 2: Detailed Form Data Capture (Recommended)
This captures the form name, form ID, and page title useful when you have multiple forms and need to track them separately.
javascript
<script>
if (window.jQuery) {
jQuery(document).ready(function() {
jQuery(document).on('submit_success', '.elementor-form', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'elementor_form_submission',
formName: event.target.getAttribute('name') ||
(event.target.querySelector('[name="form_id"]') ? event.target.querySelector('[name="form_id"]').value : 'unknown') ||
'unknown',
formId: (event.target.querySelector('[name="form_id"]') ? event.target.querySelector('[name="form_id"]').value : 'unknown'),
postTitle: (event.target.querySelector('[name="referer_title"]') ? event.target.querySelector('[name="referer_title"]').value : 'unknown')
});
});
});
}
</script>Pros: Captures form details for better tracking
Cons: Slightly more complex
Method 3: Complete Form Field Data (Advanced)
This captures all form field values—useful when you need to pass specific data to your marketing platforms.
javascript
<script>
(function() {
var origXMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function() {
var requestURL;
var requestMethod;
var requestBody;
var xhr = new origXMLHttpRequest();
var origOpen = xhr.open;
var origSend = xhr.send;
xhr.open = function(method, url) {
requestURL = url;
requestMethod = method;
return origOpen.apply(this, arguments);
};
xhr.send = function(data) {
if (/.+\/admin-ajax\.php/.test(requestURL)) {
xhr.addEventListener('load', function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response;
try {
response = JSON.parse(xhr.responseText);
} catch (e) {
return;
}
if (response && response.success && data && typeof FormData !== 'undefined' && data instanceof FormData) {
requestBody = {};
data.forEach(function(value, key) {
requestBody[key] = value;
});
if (requestBody.action === "elementor_pro_forms_send_form") {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'elementor_form_submit',
inputs: requestBody
});
}
}
}
});
}
return origSend.apply(this, arguments);
};
return xhr;
};
})();
</script>Pros: Captures all form field data (name, email, phone, etc.)
Cons: More complex, intercepts AJAX requests
How to Set Up in GTM
Step 1: Create a Custom HTML Tag
- In Google Tag Manager, go to Tags → New
- Select Custom HTML
- Paste one of the scripts above (choose your method)
- Name it “Elementor – Form Listener”
Step 2: Set Trigger to All Pages
- Click Triggering
- Select All Pages
- Save the tag
Step 3: Create a Custom Event Trigger
- Go to Triggers → New
- Choose Custom Event
- Enter the event name:
- Method 1:
elementorFormSubmitted - Method 2:
elementor_form_submission - Method 3:
elementor_form_submit
- Method 1:
- Name it “Elementor – Form Submit”
- Save
Step 4: Fire Your Conversion Tags
Use this trigger on your marketing tags:
- Google Analytics 4: Create GA4 Event with event name “form_submission”
- Facebook Pixel: Add to your Lead event
- Google Ads: Add to conversion tracking
Accessing Form Data (Methods 2 & 3)
To use the captured data in your tags, create Data Layer Variables:
For Method 2:
- Variable:
formName→ Form name - Variable:
formId→ Form ID - Variable:
postTitle→ Page title
For Method 3:
- Variable:
inputs.form_name→ Form name - Variable:
inputs.form_id→ Form ID - Variable:
inputs.email→ User email - Variable:
inputs.name→ User name
Go to Variables → New → Data Layer Variable and enter the variable name.
Testing Your Setup
- Enable GTM Preview Mode
- Submit a test form on your site
- Check the dataLayer for your event
- Verify your conversion tags fire
- Publish once confirmed
Which Method Should You Use?
- Method 1: Quick setup, just tracking that a form was submitted
- Method 2: Track multiple forms separately by name/ID
- Method 3: Need specific form field data in your marketing platforms
0 Comments