Elementor Forms + Meta Ads Conversion Tracking Setup

I see Elementor Forms setups missing Meta conversion data in about 35% of WordPress accounts I audit. The main culprit? Elementor’s form submission event doesn’t automatically fire standard conversion events that Meta can catch. You need to manually hook into Elementor’s submission events and push them to Meta via both pixel and CAPI.

The good news is Elementor Forms actually has decent hooks for this once you know where to look. Most people try to use generic form submission triggers in GTM and wonder why their conversion counts are off by 60%.

What You’ll Have Working By The End

Prerequisites

Step 1: Set Up the Elementor Form Event Listener

First, you need to catch Elementor’s form submission event and push it to the data layer. Add this JavaScript to your WordPress site via your theme’s functions.php or a code snippets plugin:

jQuery(document).ready(function($) {
    // Listen for Elementor form submissions
    $(document).on('submit_success', '.elementor-form', function(event, response) {
        const form = $(this);
        const formName = form.find('.elementor-form-fields-wrapper').closest('.elementor-widget-form').find('.elementor-widget-container').attr('data-widget_type') || 'elementor_form';
        
        // Get form field values
        const formData = {};
        form.find('input, select, textarea').each(function() {
            const field = $(this);
            const fieldName = field.attr('name');
            if (fieldName && field.val()) {
                formData[fieldName] = field.val();
            }
        });
        
        // Push to data layer
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'elementor_form_submit',
            form_name: formName,
            form_id: form.find('form').attr('id') || 'unknown',
            form_data: formData,
            user_email: formData.email || '',
            user_phone: formData.phone || formData.phone_number || ''
        });
        
        console.log('Elementor form submitted:', formData);
    });
});

If you’re using a custom theme or need more control, you can also hook directly into Elementor’s PHP action:

add_action('elementor_pro/forms/new_record', function($record, $handler) {
    $form_name = $record->get_form_settings('form_name');
    $fields = $record->get('fields');
    
    // Output JavaScript to fire GTM event
    echo "<script>
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'elementor_form_submit',
            form_name: '" . esc_js($form_name) . "',
            form_data: " . json_encode($fields) . "
        });
    </script>";
}, 10, 2);

I prefer the JavaScript approach because it’s more reliable across different Elementor versions and doesn’t depend on PHP hooks that might get overridden.

Step 2: Create GTM Trigger for Elementor Forms

In Google Tag Manager, create a Custom Event trigger:

  1. Go to Triggers → New
  2. Choose Custom Event
  3. Event name: elementor_form_submit
  4. This trigger fires on: All Custom Events
  5. Name it “Elementor Form Submission”

Create these GTM variables to capture the form data:

Form Name Variable:

User Email Variable:

User Phone Variable:

Step 3: Configure Meta Pixel Lead Event Tag

Create a new Meta Pixel tag in GTM:

  1. Tag Type: Meta Pixel

  2. Event Type: Track Event

  3. Event Name: Lead

  4. Event Parameters:

    content_name: {{DLV - Form Name}}
content_category: lead_form
value: 1
currency: USD

  5. Trigger: Elementor Form Submission

  6. Advanced Settings → Event ID: Use this custom JavaScript variable:

function() {
    return 'elementor_' + {{DLV - Form Name}} + '_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
}

This event ID is crucial for deduplicating events between client-side pixel and server-side CAPI.

Step 4: Set Up Meta CAPI Integration

Here’s where most people fumble. You need server-side tracking via Meta’s Conversions API to get around iOS 14.5+ tracking limitations. I recommend using a WordPress plugin like “Conversions API for WordPress” or setting up a custom webhook.

Option A: Using Official Meta CAPI Plugin

  1. Install the “Meta for WordPress” plugin
  2. Connect your Facebook Business account
  3. Go to Meta → Settings → Conversions API
  4. Enable “Automatic Advanced Matching”
  5. Add this filter to your theme’s functions.php:
add_filter('facebook_for_woocommerce_integration_aam_fields', function($fields) {
    // Add Elementor form data to CAPI events
    if (isset($_POST['elementor_form_submit'])) {
        $form_data = $_POST['form_data'];
        $fields['em'] = !empty($form_data['email']) ? hash('sha256', strtolower(trim($form_data['email']))) : '';
        $fields['ph'] = !empty($form_data['phone']) ? hash('sha256', preg_replace('/[^0-9]/', '', $form_data['phone'])) : '';
    }
    return $fields;
});

Option B: Custom CAPI Webhook

Set up a webhook endpoint that receives Elementor form submissions and sends them to Meta CAPI:

function send_elementor_form_to_meta_capi($record, $handler) {
    $fields = $record->get('fields');
    $form_settings = $record->get_form_settings();
    
    $event_data = [
        'event_name' => 'Lead',
        'event_time' => time(),
        'action_source' => 'website',
        'event_source_url' => get_permalink(),
        'event_id' => 'elementor_' . $form_settings['form_name'] . '_' . time() . '_' . wp_rand(1000, 9999),
        'user_data' => [
            'em' => !empty($fields['email']) ? hash('sha256', strtolower(trim($fields['email']))) : '',
            'ph' => !empty($fields['phone']) ? hash('sha256', preg_replace('/[^0-9]/', '', $fields['phone'])) : '',
            'client_ip_address' => $_SERVER['REMOTE_ADDR'],
            'client_user_agent' => $_SERVER['HTTP_USER_AGENT']
        ],
        'custom_data' => [
            'content_name' => $form_settings['form_name'],
            'content_category' => 'lead_form',
            'value' => 1,
            'currency' => 'USD'
        ]
    ];
    
    // Send to Meta CAPI
    $response = wp_remote_post('https://graph.facebook.com/v18.0/' . FACEBOOK_PIXEL_ID . '/events', [
        'body' => json_encode([
            'data' => [$event_data],
            'access_token' => FACEBOOK_ACCESS_TOKEN
        ]),
        'headers' => ['Content-Type' => 'application/json']
    ]);
}

add_action('elementor_pro/forms/new_record', 'send_elementor_form_to_meta_capi', 10, 2);

Replace FACEBOOK_PIXEL_ID and FACEBOOK_ACCESS_TOKEN with your actual credentials.

Step 5: Configure Elementor Form Actions

In your Elementor form settings, you might want to add additional actions:

  1. Edit your Elementor form
  2. Go to Actions After Submit
  3. Add Webhook action (optional, for backup tracking)
  4. URL: Your CAPI endpoint
  5. Add Redirect action if needed (this won’t interfere with tracking)

The key is ensuring your form submission event fires before any redirect happens. The JavaScript listener we set up in Step 1 handles this correctly.

Testing & Verification

Test in GTM Preview Mode:

  1. Enable GTM Preview mode
  2. Submit your Elementor form
  3. Check that elementor_form_submit event fires
  4. Verify your Meta Pixel Lead event tag triggers
  5. Check that form data variables populate correctly

Verify in Meta Events Manager:

  1. Go to Events Manager → Test Events
  2. Enter your website URL
  3. Submit the form
  4. Look for Lead events in the test events feed
  5. Should see both browser and server events (if CAPI is working)

Cross-Check Conversion Counts:

Check your numbers weekly:

Debug Meta CAPI:

Use Meta’s Events Manager Diagnostics tab to check CAPI integration:

Troubleshooting

Problem: GTM trigger not firing when form is submitted Solution: Check that the JavaScript event listener is loaded after Elementor’s scripts. Add jQuery(document).ready() wrapper and ensure it’s placed in footer, not header. Also verify the form selector - some custom Elementor themes modify the form classes.

Problem: Meta showing duplicate conversion events Solution: Event deduplication isn’t working. Make sure your client-side pixel and CAPI events use the exact same event_id. Check the Events Manager Diagnostics tab for deduplication status. The event ID must be identical between both tracking methods.

Problem: CAPI events not appearing in Events Manager Solution: Check your access token permissions and pixel ID. The token needs ads_management and business_management permissions. Test your CAPI endpoint directly with curl to isolate WordPress-specific issues. Also verify SSL certificates on your server.

Problem: Form data not passing to Meta events Solution: Elementor field names might not match your data layer variables. Check the browser console for the data layer push and verify field names. Some Elementor forms use custom field IDs instead of standard names like ‘email’ and ‘phone’.

Problem: Conversion attribution showing as “Direct” instead of Meta ads Solution: This usually indicates the Meta pixel isn’t loading before form submission, or users are blocking client-side tracking. Ensure your pixel loads in the page header, not footer. CAPI helps here but won’t fix attribution for blocked pixel scenarios.

Problem: iOS users not tracking properly Solution: iOS 14.5+ blocks most client-side tracking. This is exactly why you need CAPI working properly. Check that your CAPI events include proper user data (hashed email/phone) and that Advanced Matching is enabled. Consider using Meta’s Offline Conversions API as a backup for high-value leads.

What To Do Next

Now that your Elementor Forms are tracking in Meta Ads, consider these related setups:

Need help with a complex tracking setup? Get a free tracking audit and I’ll identify what’s broken in your current configuration.

This guide is part of the Meta Ads Conversion Tracking Hub — complete guides for tracking every conversion type in Meta Ads with proper attribution and iOS 14.5+ compliance.