How to Track Where Your Form Submissions Are Coming From Using Your Own HTML Form

You already have a contact form on your website.

Maybe it is a simple three-field form on your portfolio. Maybe it is a detailed quote request form on your business site.
Maybe it is a registration form you built yourself in React or plain HTML.

It is working. Submissions are arriving.
People are filling it in.

But here is the question you probably have not thought to ask:

Where are these people coming from?

Did they find your site through a Google search? Did someone share your link in a WhatsApp group? Did they click a link in your email newsletter? Did they come from your Instagram bio?

If you do not know the answer, you are making marketing decisions blindly. You are spending time on channels that might not be sending you any leads while ignoring the one channel sending you your best customers.

This guide shows you how to add UTM tracking to your existing HTML form using Formgrid, so every submission automatically shows you exactly where it came from.

What You Need Before Starting

A Formgrid account:
Sign up for free at formgrid.dev
No credit card required
An existing HTML form on your website:
Any HTML form works, whether it is
a contact form, a quote request form,
a registration form, or anything else
A basic understanding of HTML:
You just need to be able to add
a few lines to your existing form

How UTM Tracking Works With Your Own HTML Form

When someone arrives at your page
through a tracked link like this:
https://yourwebsite.com/contact
?utm_source=twitter&utm_medium=social

The UTM parameters are in the page URL. Your form needs to read those parameters from the URL and include them in the
submission, so Formgrid knows where the person came from.

There are two parts to setting this up:
Part 1:
Add hidden fields to your HTML form
to carry the UTM data
Part 2:
Add a small JavaScript snippet that reads the UTM parameters from the URL and fills those hidden fields automatically before the form submits

The person filling in your form sees nothing different. They fill in their name, email, and message as normal. The UTM data is captured invisibly in the background.

Step 1: Connect Your Form to Formgrid

If you have not already done this, replace your form action URL with
your Formgrid endpoint. One line change. Everything else stays exactly as it is.

<form 
  action="https://formgrid.dev/api/f/your-form-id" 
  method="POST"
>
  <input 
    type="text" 
    name="name" 
    placeholder="Your Name" 
    required 
  />
  <input 
    type="email" 
    name="email" 
    placeholder="Your Email" 
    required 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>
  <button type="submit">Send</button>
</form>

Go to formgrid.dev and sign up. Create a new form and copy your endpoint URL from the form details page.

Paste that endpoint URL into your form action attribute. Your form now sends submissions to Formgrid.

Step 2: Add Hidden UTM Fields to Your Form

Add three hidden input fields inside your form. These fields are invisible to the person filling in your form, but they carry the UTM data to Formgrid when the form is submitted.

<form 
  action="https://formgrid.dev/api/f/your-form-id" 
  method="POST"
>
  <input 
    type="text" 
    name="name" 
    placeholder="Your Name" 
    required 
  />
  <input 
    type="email" 
    name="email" 
    placeholder="Your Email" 
    required 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>

  <!-- Hidden UTM tracking fields -->
  <!-- These are invisible to the user -->
  <input 
    type="hidden" 
    name="utm_source" 
    id="utm_source" 
  />
  <input 
    type="hidden" 
    name="utm_medium" 
    id="utm_medium" 
  />
  <input 
    type="hidden" 
    name="utm_campaign" 
    id="utm_campaign" 
  />

  <button type="submit">Send</button>
</form>

The three hidden fields are:
utm_source:
Where the traffic came from
Examples: twitter, whatsapp,
instagram, newsletter, google
utm_medium:
How the traffic arrived
Examples: social, email, paid, organic
utm_campaign:
Which specific campaign sent them
Examples: summer_launch, instagram_bio,
newsletter_april

Step 3: Add the JavaScript Snippet

Add this script immediately after your closing form tag. It reads the UTM parameters from the page URL and populates the hidden fields automatically before the form is submitted.

<script>
  (function() {
    // Read UTM parameters from the 
    // current page URL
    var params = new URLSearchParams(
      window.location.search
    )

    // Get each UTM value from the URL
    var utmSource = 
      params.get('utm_source')
    var utmMedium = 
      params.get('utm_medium')
    var utmCampaign = 
      params.get('utm_campaign')

    // Populate the hidden fields 
    // if the values exist
    if (utmSource) {
      var sourceField = 
        document.getElementById('utm_source')
      if (sourceField) 
        sourceField.value = utmSource
    }

    if (utmMedium) {
      var mediumField = 
        document.getElementById('utm_medium')
      if (mediumField) 
        mediumField.value = utmMedium
    }

    if (utmCampaign) {
      var campaignField = 
        document.getElementById('utm_campaign')
      if (campaignField) 
        campaignField.value = utmCampaign
    }
  })()
</script>

This script runs automatically when the page loads. If the URL contains UTM parameters, it fills the hidden fields silently. If there are no UTM parameters in the URL, the hidden fields stay empty, and the submission goes through normally.

Your Complete Form With UTM Tracking

Here is the full form with everything
in place:

<form 
  action="https://formgrid.dev/api/f/your-form-id" 
  method="POST"
>
  <input 
    type="text" 
    name="name" 
    placeholder="Your Name" 
    required 
  />
  <input 
    type="email" 
    name="email" 
    placeholder="Your Email" 
    required 
  />
  <textarea 
    name="message" 
    placeholder="Your Message"
  ></textarea>

  <!-- Hidden UTM tracking fields -->
  <input 
    type="hidden" 
    name="utm_source" 
    id="utm_source" 
  />
  <input 
    type="hidden" 
    name="utm_medium" 
    id="utm_medium" 
  />
  <input 
    type="hidden" 
    name="utm_campaign" 
    id="utm_campaign" 
  />

  <button type="submit">Send</button>
</form>

<script>
  (function() {
    var params = new URLSearchParams(
      window.location.search
    )

    var utmSource = 
      params.get('utm_source')
    var utmMedium = 
      params.get('utm_medium')
    var utmCampaign = 
      params.get('utm_campaign')

    if (utmSource) {
      var sourceField = 
        document.getElementById('utm_source')
      if (sourceField) 
        sourceField.value = utmSource
    }

    if (utmMedium) {
      var mediumField = 
        document.getElementById('utm_medium')
      if (mediumField) 
        mediumField.value = utmMedium
    }

    if (utmCampaign) {
      var campaignField = 
        document.getElementById('utm_campaign')
      if (campaignField) 
        campaignField.value = utmCampaign
    }
  })()
</script>

That is the entire setup. No libraries.
No build tools. No dependencies. Just
three hidden fields and ten lines of vanilla JavaScript.

Step 4: Create Your Tracked Links

Now that your form is ready to capture UTM data, you need to create tracked versions of your page URL to share in different places.

Your normal contact page URL:
https://yourwebsite.com/contact

Your tracked versions:
For Twitter:
https://yourwebsite.com/contact
?utm_source=twitter&utm_medium=social
For WhatsApp:
https://yourwebsite.com/contact
?utm_source=whatsapp&utm_medium=social
For your email newsletter:
https://yourwebsite.com/contact
?utm_source=newsletter&utm_medium=email
For Instagram bio:
https://yourwebsite.com/contact
?utm_source=instagram&utm_medium=social
For LinkedIn:
https://yourwebsite.com/contact
?utm_source=linkedin&utm_medium=social

Share the right link in the right place. The person clicking the link arrives at your normal contact page. They see nothing different. But when they submit your form, Formgrid records exactly which link they clicked.

Step 5: See Where Your Submissions

Are Coming From

When submissions arrive in your Formgrid dashboard, each one shows you exactly where it came from.

Open any submission, and you will see:
Source: twitter via social

Or:
Source: whatsapp via social

Or:
Source: newsletter via email

After a few weeks of sharing tracked links, you can see at a glance which channel is sending you the most submissions and which channel is sending you leads that actually convert.

Using This With React or

Other Frameworks

If your form is built in React or another JavaScript framework, the
approach is the same, but you read the URL parameters using the
framework's router or the native browser API.

React example:

import { useEffect, useState } from 'react'

function ContactForm() {
  const [utmSource, setUtmSource] = 
    useState('')
  const [utmMedium, setUtmMedium] = 
    useState('')
  const [utmCampaign, setUtmCampaign] = 
    useState('')

  useEffect(() => {
    const params = new URLSearchParams(
      window.location.search
    )
    setUtmSource(
      params.get('utm_source') || ''
    )
    setUtmMedium(
      params.get('utm_medium') || ''
    )
    setUtmCampaign(
      params.get('utm_campaign') || ''
    )
  }, [])

  return (
    <form 
      action="https://formgrid.dev/api/f/your-form-id"
      method="POST"
    >
      <input 
        type="text" 
        name="name" 
        placeholder="Your Name" 
        required 
      />
      <input 
        type="email" 
        name="email" 
        placeholder="Your Email" 
        required 
      />
      <textarea 
        name="message" 
        placeholder="Your Message"
      />

      {/* Hidden UTM fields */}
      <input 
        type="hidden" 
        name="utm_source" 
        value={utmSource} 
      />
      <input 
        type="hidden" 
        name="utm_medium" 
        value={utmMedium} 
      />
      <input 
        type="hidden" 
        name="utm_campaign" 
        value={utmCampaign} 
      />

      <button type="submit">
        Send Message
      </button>
    </form>
  )
}

export default ContactForm

Next.js example using useSearchParams:

'use client'

import { useEffect, useState } from 'react'
import { useSearchParams } from 'next/navigation'

function ContactForm() {
  const searchParams = useSearchParams()

  const utmSource = 
    searchParams.get('utm_source') || ''
  const utmMedium = 
    searchParams.get('utm_medium') || ''
  const utmCampaign = 
    searchParams.get('utm_campaign') || ''

  return (
    <form 
      action="https://formgrid.dev/api/f/your-form-id"
      method="POST"
    >
      <input 
        type="text" 
        name="name" 
        placeholder="Your Name" 
        required 
      />
      <input 
        type="email" 
        name="email" 
        placeholder="Your Email" 
        required 
      />
      <textarea 
        name="message" 
        placeholder="Your Message"
      />

      <input 
        type="hidden" 
        name="utm_source" 
        value={utmSource} 
      />
      <input 
        type="hidden" 
        name="utm_medium" 
        value={utmMedium} 
      />
      <input 
        type="hidden" 
        name="utm_campaign" 
        value={utmCampaign} 
      />

      <button type="submit">
        Send Message
      </button>
    </form>
  )
}

export default ContactForm

The logic is identical in every framework. Read the URL parameters when the component mounts. Pass them as hidden field values. Formgrid handles the rest.

Testing Your Setup

Before sharing your tracked links, test that everything is working correctly.

Step 1: Open your contact page with
a UTM parameter in the URL:
https://yourwebsite.com/contact
?utm_source=test&utm_medium=testing

Step 2: Right-click on the page and inspect the hidden form fields. You should see:

utm_source value: test
utm_medium value: testing
utm_campaign value: (empty)

Step 3: Fill in the form and submit it.

Step 4: Open your Formgrid dashboard and find the submission. Open it and check that the source shows:
Source: test via testing

If you see the source on the submission, your setup is working correctly. If not, check that the hidden field IDs match the JavaScript and that the script is running after the form loads.

A Real Example: The Difference

This Makes

James runs a cleaning business. He shares his quote request form link in four places
every week:
His Instagram bio
A local business Facebook group
His monthly email newsletter
Google My Business profile

Before UTM tracking, he had no idea which channel was working. He was
posting on Instagram every day and sending a newsletter once a month.

After adding UTM tracking to his form, he checked his Formgrid dashboard
after one month:
Instagram: 3 submissions
Facebook group: 21 submissions
Newsletter: 8 submissions
Google My Business: 11 submissions

He was spending most of his time on Instagram, and it was sending him almost nothing. The Facebook group he checked once a week was sending him the most leads.

He shifted his time accordingly. More engagement in the Facebook group. Less Instagram posting. His monthly quote requests increased by 60 percent without doing any additional marketing.

That decision was only possible because he could see the data.

What Happens to the UTM Data

in Formgrid

Every submission that includes UTM data shows the source in the lead
detail view in your dashboard.

You also see it in the leads tab alongside each submission, so you
can see at a glance which channel each lead came from without opening
the full detail view.

Combined with Formgrid's lead pipeline, you can track both the source and the outcome of every lead:
Facebook group submissions:
21 total
15 contacted
9 converted (43% conversion rate)
Instagram submissions:
3 total
2 contacted
0 converted (0% conversion rate)

Facebook is not just sending more leads.
It is sending leads that actually become customers. Instagram is sending leads that go nowhere.

Without UTM tracking, you would never know that.

Getting Started

If you already have an HTML form on
your website:
Step 1:
Connect it to Formgrid by replacing
the form action URL
Step 2:
Add the three hidden UTM fields
Step 3:
Add the JavaScript snippet
Step 4:
Create tracked versions of your
page URL for each channel
Step 5:
Share the right link in each place

Total setup time: about 10 minutes.

From that point forward, every submission
automatically shows you where it came from.

👉 Start free at formgrid.dev

No credit card required. Free plan
available. UTM tracking works on all plans, including free.

Have questions about setting up UTM
tracking with your specific form or
framework? Email allen@formgrid.dev, and I will help you get it working.

推荐订阅源

DEV Community