How to Store UTM Parameters in Elementor Forms

Which UTM Parameters Should You Store?

The five standard parameters most commonly passed to forms are utm_source, utm_medium, utm_campaign, utm_content, and utm_term. Together, they show where the user came from and which advertising variation generated the response.

For example, an ad URL might look like this: https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_content=banner_a&utm_term=shoes. After the form is submitted, these values will appear in the corresponding inquiry fields.

• utm_source — the traffic source: google, facebook, newsletter, and so on.
• utm_medium — the channel type: cpc, social, email, or organic.
• utm_campaign — the name of the advertising campaign.
• utm_content — the specific ad, banner, or creative variation.
• utm_term — the keyword or another audience or query identifier.

Create Hidden Fields in the Elementor Form

Open the required Elementor form and add five fields of the Hidden type. For each field, set an ID that exactly matches the UTM parameter name. The script uses this ID to find the field on the page.

Hidden fields are not displayed to visitors, but their values are submitted along with the other form data. They should not be required: if someone arrives without UTM parameters, the form should still accept the submission.

• utm_source
• utm_medium
• utm_campaign
• utm_content
• utm_term

Check the Field ID, Not Just Its Label

The name displayed to an administrator in the editor and the technical ID are not always the same. In each field's settings, check the ID value specifically. Do not add spaces, uppercase letters, or prefixes such as field_.

If the page contains multiple identical blocks, such as a form in the header and another at the bottom of the page, add the UTM fields to each one. The script below fills all fields with the corresponding name that it finds.

Add JavaScript to Populate the Values

The script reads the parameters from the page URL and writes them to the Elementor hidden fields. You can place it in Custom Code or in an HTML widget on the page containing the form, depending on the tools available in the project.

The code checks whether each parameter exists. If a particular UTM parameter is missing from the URL, the corresponding field remains empty and the form is not blocked.

document.addEventListener('DOMContentLoaded', function () {
  const params = new URLSearchParams(window.location.search);
  const keys = ['source', 'medium', 'campaign', 'content', 'term'];

  keys.forEach(function (key) {
    const parameterName = 'utm_' + key;
    const value = params.get(parameterName);

    if (value === null) {
      return;
    }

    const fields = document.querySelectorAll(
      '[name="form_fields[' + parameterName + ']"]'
    );

    fields.forEach(function (field) {
      field.value = value;
    });
  });
});

How the Code Works

URLSearchParams retrieves values from the query string, which is the part of the URL after the question mark. The script then loops through the parameter list and looks for fields with names such as form_fields[utm_source]. This is the standard field format used by Elementor Forms.

Using querySelectorAll instead of searching for only the first element makes it possible to populate multiple forms on the same page. If the project uses nonstandard form loading after user interaction, you may need to run the script after the form appears in the DOM.

Configure Field Delivery in the Submission

Populating the fields in the browser is not enough: you also need to confirm that Elementor passes them to the selected form actions. Check the email delivery settings, CRM integration, or other connected service. The names and values of the hidden fields should appear in the email or inquiry record.

If the form is sent by email, review the message template. It should use the form fields rather than manually entered empty values. For a CRM, check that the corresponding fields have been created and that the integration accepts their values.

Do not treat UTM values on the client side as reliable proof of the lead source. JavaScript runs in the browser, so a user can technically change this data manually.

• Add the UTM fields to the new inquiry notification.
• Check the field mapping when sending data to the CRM.
• Do not make the UTM fields required.
• Decide in advance where the team will review this data.

How to Test UTM Parameter Storage

Do not test by opening the page normally. Use a URL with test parameters instead. For example:

• Open the form page at an address such as example.com/?utm_source=test_source&utm_medium=test_medium&utm_campaign=test_campaign&utm_content=test_content&utm_term=test_term.
• Submit the form with test contact details.
• Check the email, WordPress record, or lead card in the CRM.
• Make sure each value appears in its corresponding field.
• Repeat the test without UTM parameters and confirm that the form still submits.

If the Values Were Not Passed

First, open your browser's developer tools and check whether the required input elements exist on the page. If the fields are missing, have different IDs, or are not Elementor hidden fields, the script will not be able to find them.

Also check that the code loads without errors, that the test URL contains the correct parameter names, and that a cached version of the page is not affecting the result after your changes.

• The field ID does not match the UTM parameter name.
• The URL contains a typo, such as utm-сampaign instead of utm_campaign.
• The script was added to the wrong page or is not executing.
• The CRM is not configured to accept hidden fields.
• The cache or JavaScript optimizer is serving an older version of the code.

Common Mistakes and Important Limitations

UTM parameters remain available only in the current URL unless you separately configure their transfer between pages. If a user arrives on a landing page from an ad and then moves to another page containing the form, the parameters may disappear from the address.

For multi-page scenarios or complex funnels, values are often stored in a cookie or sessionStorage and inserted into the form later. This is a separate solution that must be tested with consent requirements for cookies and privacy obligations in mind.

Do not include personal data in UTM parameters, such as names, phone numbers, email addresses, or other sensitive information. UTM parameters may appear in browser history, analytics systems, server logs, and emails.

Remember that the presence of a UTM parameter does not prove the actual source of a submission. Data can be lost through redirects, blockers, parameter removal, or navigation between pages.

• Do not use Cyrillic or inconsistent parameter names in advertising URLs.
• Follow consistent capitalization and campaign naming conventions.
• Check functionality after updating Elementor, the theme, or optimization plugins.
• Limit access to UTM data to employees who need it for analytics.