Elementor Integration

Native Elementor Form Support

This is our preferred way of collecting UTMs into your Elementor Form.

First add your field just like any other field to your form

Go to Advanced and select "parameters" under HandL UTM Grabber menu

Click parameter and enter the parameter name you want to track into the form field

That's it!Elementor Integration

This documentation has been obsoluted, please use Native Elementor Form Support

1. Click 'Post' and 'Add New'

2. Click 'Edit with Elementor' Button

3. Search 'Form'

4. Click 'Add Item' Button

5. Select the Type as 'Hidden' and Give a name for Label

6. Click 'Advance', Give a name to Custom ID and then Click 'PUBLISH' button

🥳Now You are ready!

Add cookie support to Elementor Pro

This method has been officially deprecated and archive only. Please use Native Elementor Form Support

In case Elementor Pro doesn't capture UTMs as it is supposed to. You can try this reliable method that allows Elementor Pro to grab the UTMs from COOKIES.

Install the cookies module

First of all, download the cookies.php file from the attachment (left sidebar) and upload it to wp-content/plugins/elementor-pro/modules/dynamic-tags/tags

Acitvate cookies module

Go and edit the wp-content/plugins/elementor-pro/modules/dynamic-tags/module.php:52 and add Cookies in the get_tag_classes_names function's array

Set your field to read the value from Cookies.

Go to your form you'd like to edit, select Default Value as "Cookies" under "Advanced". And then enter the the parameter name in the text field as shown below.

You can use any parameter name listed here Native WP ShortcodesActiveCampaign hidden fields to appear in Elementor Form

By default Elementor doesn't list to map hdden fields in Elementor Form

You can't map your form field to a hidden field in Elementor...

You can resolve this in two ways

change all the custom parameters from ActiveCampaign to text from hidden. They will immediately will be mappable.

edit elementor code (single line edit) wp-content/plugins/elementor-pro/modules/forms/classes/activecampaign-handler.php:131. Add hidden => 'text' as shown in the image.

After you are done either of those, you will be able to map the fields just fine (see the image)...

Appending UTM variables using Text Editor in Elementor

Simply add a class attribute utm-out to the your text editor...

And the class variables utm-out will append UTMs to every single hyperlink within that text editor.

Appending UTMs to the selective Buttons in Elementor

Simply add the magical utm-out class attribute to the button as custom attributes as class|utm-out

Elementor Integration with Mailchimp

First, implement as shown here in the Native Elementor Form Support.

After doing so, enable MailChimp and proceed with the mapping as shown below:

Syncing the form data to your CRM via Webhook

After setting up your Elementor Form with HandL UTM Grabber based on the documentation, the next step is to send this data to your CRM. One method is using a webhook service like Zapier or Integromat (Make).

Select "Webhook" under the Action After Submit menu in Elementor.

A new menu item, "Webhook," will appear in the Edit Form section. Click "Webhook" to configure it.

Copy and paste your Zapier or Make URL into the designated field. Once the form is submitted, your selected service will receive the payload, including all the UTM data collected.