Track UTMs in Divi Contact Form

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()