How to Capture and Parse the LeadJourney Click ID in a Hidden Field with WordPress Elementor Forms

Overview

When using LeadJourney tracking, it's essential to capture the Click ID from visitors and store it in a hidden field within your Elementor Forms. This is the foundation to later transfer the LeadJourney Click ID inside your CRM and match offline conversion data from your CRM with data from the ad platform.

In this guide, you'll learn how to:
✅ Retrieve the LeadJourney Click ID
✅ Automatically insert it into an Elementor Form hidden field
✅ Ensure the Click ID persists, even if the form is dynamically loaded

Step 1: Add a Hidden Field to Your Elementor Form

To store the Click ID, we need to add a hidden field inside your Elementor form:

Open your WordPress Dashboard → Edit your Elementor Page.
Select the Form Widget inside Elementor.
Add a new field:
- Type: Hidden
- Field Name: clickid
- Field ID: clickid
- Default Value: {clickid}
Save the changes and update your page.

Step 2: Add the JavaScript to Insert the Click ID

Since Elementor dynamically loads form fields, we need to use JavaScript to ensure the Click ID is set correctly.

Where to Add the Script

document.addEventListener("DOMContentLoaded", function () {
function setFormClickIdValue(clickid) {
console.log("Click ID found:", clickid);

let inputField = document.querySelector('input[name="form_fields[clickid]"]');

if (inputField) {
console.log("Hidden Field found:", inputField);

if (inputField.value.includes("{clickid}")) {
inputField.value = inputField.value.replace(/{clickid}/, clickid);
} else {
inputField.value = clickid; // If {clickid} is not set, assign the value directly
}

console.log("Click ID successfully inserted:", inputField.value);
} else {
console.warn("Hidden Field not found.");
}
}

function getClickId() {
return window.lj ? window.lj.getClickId() : null;
}

function insertClickId() {
let clickId = getClickId();
if (clickId) {
setFormClickIdValue(clickId);
} else {
console.warn("No Click ID found.");
}
}

// Mutation Observer: Detects when Elementor dynamically loads the form
const observer = new MutationObserver(() => {
let inputField = document.querySelector('input[name="form_fields[clickid]"]');
if (inputField) {
observer.disconnect(); // Stop observing once the field is found
insertClickId();
}
});

// Watch for changes in the DOM (in case the form loads dynamically)
observer.observe(document.body, { childList: true, subtree: true });

// Ensure the script runs after Elementor has fully loaded
if (window.elementorFrontend) {
window.elementorFrontend.hooks.addAction('frontend/element_ready/form', insertClickId);
}

// Ensure the Click ID is set before form submission
document.addEventListener("submit", function (event) {
let clickId = getClickId();
if (clickId) {
setFormClickIdValue(clickId);
}
}, true);
});

Place the following script before </body> in your WordPress theme.

You can do this by:

✅ Adding it inside Elementor Custom Scripts
✅ Using a plugin like Code Snippets
✅ Editing your theme’s footer.php (not recommended for non-technical users)

Step 3: Testing the Implementation

Open the contact page with the Elementor form.
Open Developer Console (press F12 → Go to the "Console" tab).
Reload the page and check for messages like:
- "Click ID found: xyz-123"
- "Hidden Field found:"
- "Click ID successfully inserted:"
Submit the form and check whether the Click ID is sent correctly.

Troubleshooting

🚨 The Click ID is missing from the form submission?
✔ Ensure the field’s name is correctly set to clickid in Elementor.
✔ Check if the JavaScript runs by opening the browser console (F12 → Console).
✔ Clear cache if the script doesn't seem to update the field.

🚨 The field is still showing {clickid}?
✔ Elementor does not automatically replace {clickid}. This script ensures it is dynamically inserted.
✔ Double-check if Elementor loads the form dynamically, which might delay field rendering.

🚨 Still not working?
✔ Inspect the form field in HTML (Right-click → Inspect Element) and ensure the input name matches form_fields[clickid].

Final Thoughts

By following this guide, you ensure that the LeadJourney Click ID is captured and accurately stored in your Elementor Forms, allowing seamless tracking of your leads.

This method ensures:

✅ Accurate tracking of Click IDs
✅ Compatibility with dynamically loaded Elementor forms
✅ No loss of data due to delays in form rendering

🚀 Now you’re ready to track leads effectively! 🚀