Divi Form UTM Tracking Integration

• How to Track UTMs in Divi Contact Form
• Send Divi Form UTMs via Zapier or Webhook

How to Track UTMs in Divi Contact Form

UTM attribution overview

This guide explains How to Track UTMs in Divi Contact Form with HandL UTM Grabber. It helps you capture UTM source, medium, campaign, term, content, click IDs, referrer, and landing page data and keep the marketing context needed for accurate reporting across forms, bookings, signups, and sales.

Add the input fileds to your form

You can add as many fields as you like to your form and track them all. Here we only illustrate for utm_campaign. Check here for the list of parameters you can track Native WP Shortcodes.

Make sure the Field ID exactly matches with your parameter name

In this case, it is utm_campaign

the final step is to make sure that the required field under field options is set to no

Hide the fields

Unfortunately, divi does not allow adding hidden elements to your form. But no worries, we can hide it using Divi. Simply add the following CSS rule under Main Element

display: none;

And that's it

You are ready to collect the data. Rest is handled by HandL UTM Grabber :)

Proof that you are collecting the data from your form...

You can run the following JS line (in developer console) to print the content of your form without actually submitting the form.

jQuery('form').serializeArray()

Send Divi Form UTMs via Zapier or Webhook

UTM attribution overview

This walkthrough covers sending full UTM Grabber data from Divi Form to Zapier, Make, or your own webhook. Handy when you need gclid, fbclid, first-touch fields, or custom params alongside the lead or order.

For the primary setup, see the main Divi Form guide.

When a webhook makes sense

Native fields in Divi Form often stop at basic UTMs. A webhook lets you push everything UTM Grabber stores without trimming values or losing click IDs.

Thank-you page script

Paste this on your confirmation page. Swap in your Zapier or Make hook URL.

<script>
var qvars = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
    qvars[key] = decodeURIComponent(value.replace(/\+/g, ' '));
});
qvars = Object.assign({}, (typeof handl_utm !== 'undefined' ? handl_utm : {}), qvars);
setTimeout(function() {
    var data = new URLSearchParams(qvars).toString();
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open('GET', 'https://hooks.zapier.com/hooks/catch/YOUR_ID/YOUR_KEY/?' + data, true);
    xmlHttp.send(null);
}, 1000);
</script>

Full pattern explained in Triggering Zapier on Thank you Page.

Quick Zapier / Make checklist

1. Create a Catch Hook trigger and copy the URL
2. Run a test conversion with UTMs in the landing URL
3. Confirm gclid, utm_source, and email (if present) show up in the payload
4. Map fields into your CRM or spreadsheet

Parameter reference: Native WP Shortcodes.

Make users: see Make Integromat integration.