If you're running marketing campaigns and want to track the sources in your Form Submissions
inside your Common Ninja form, you can easily capture and insert them using a bit of JavaScript.
This guide will walk you through how to dynamically insert UTM data into a form field using Common Ninja’s comp-props attribute.
1: Add a Hidden Field to Your Form
- Go to your Common Ninja Form Editor.
- Click "Add Field" ➜ Choose Text Field.
- Rename the field label to something like:
“UTM Tracking Info” (optional, since it will be hidden).
4. Scroll down and turn on “Hide Field” (this will keep it invisible to your users).
2: Add the Script
Paste the following script on the page where your Common Ninja form is embedded:
<script>
function getUTMParams() {
const params = new URLSearchParams(window.location.search);
const utmParams = {};
['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].forEach(key => {
if (params.has(key)) {
utmParams[key] = params.get(key);
}
});
return utmParams;
}
document.addEventListener('DOMContentLoaded', () => {
const utms = getUTMParams();
const compPropsObject = {
'field-id': JSON.stringify(utms)
};
const encodedProps = encodeURIComponent(JSON.stringify(compPropsObject));
const commoninjsWidget = document.querySelector('.pid-xxxx-xxxxx-xxxx-xxxx-xxxxx');
if (commoninjsWidget) {
commoninjsWidget.setAttribute('comp-props', encodedProps);
}
});
</script>
3.Customize the Script
- UTM Parameters
Feel free to edit, remove, or reorder the UTM keys in this array:
['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
- Replace The 'field-id'
Go to your Common Ninja Form Editor:
- Click on the field you want to populate (typically a hidden field).
- Copy the Field ID.
- Replace 'field-id' in the script with this value.
- Replace the .pid-xxxx-xxxxx-xxxx-xxxx-xxxxx Selector
- In the Common Ninja Form Editor, click Publish.
- Copy the widget's PID class (starts with pid-).
- Replace the selector in the script accordingly.
View UTM Data in Your Submissions 🙂
Read More About : How To Pre-Populate Form Fields With Data