How to Track Marketing Campaign Sources In Your Form Submissions

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

1. Go to your Common Ninja Form Editor.
   
   
2. Click "Add Field" ➜ Choose Text Field.
   
   
3. 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