How to Capture the URL of a Page in Webflow Forms

Learn how to capture the page URL in Webflow forms using a hidden field and JavaScript. Perfect for tracking form submissions across multiple pages without creating separate forms. Step-by-step guide included!

By
Joshua McSorley
Website
2 min
Share this post
code on a computer

The Problem: One Form, Multiple Pages

I ran into this exact challenge recently while working with a Webflow customer. Their marketing team didn’t want to manage 10 different forms for every service they offered. Instead, they created a single multi-purpose form used across their brochure website and landing pages.

This made things simple, except for one major drawback. When leads started filling out the form, the team had no way of knowing which page the submission came from.

That’s where a small JavaScript snippet comes to the rescue. With a simple hidden form field, we can capture and store the page URL inside the form submission—without requiring any extra input from the user.

Step-by-Step Guide: Capturing the Page URL in Webflow Forms

To get this working in Webflow, we need to:

  1. Create a hidden form field to store the URL.
  2. Use JavaScript to detect the page URL and insert it into the form.
  3. Publish and test to make sure it works as expected.

Step 1: Add a Hidden Field to Your Webflow Form

Webflow forms don’t have a built-in way to capture the page URL, so we’ll manually add a hidden input field inside the form.

Here’s how:

  1. Open the Form Block in Webflow.
  2. Add an Embed element inside the form.
  3. Inside the embed, paste this simple HTML snippet:
<input type="hidden" id="page-url" name="page-url" value="">


This field will remain invisible to users but will hold the page URL when the form is submitted.

Step 2: Use JavaScript to Capture the Page URL

Now, let’s use JavaScript to grab the current page’s URL and insert it into the hidden field.

In Webflow, go to Page Settings → Custom Code and add the following script inside the <body> section:

<script>
document.addEventListener("DOMContentLoaded", function() {
   // Get the current page URL
   var currentUrl = window.location.href;

   // Find the hidden form field and set its value
   var urlField = document.getElementById("page-url");
   if (urlField) {
       urlField.value = currentUrl;
   }
});
</script>


This script runs as soon as the page loads and automatically fills in the hidden form field with the page URL.

Step 3: Publish & Test

Once you’ve added the code, publish your changes and do a quick test:

  1. Submit the form on different pages and check the form submissions in Webflow.
  2. Look at the page-url field in the submission data—it should display the exact URL where the form was filled out.
  3. If everything is working as expected, you’re good to go!

Why This Works

This method ensures that no matter where a user submits the form, you’ll always know where they came from—without forcing them to enter extra information manually.

For businesses like my solar industry client, this means:
✅ A single, centralized form for all services.
✅ No need to manage multiple forms for every page.
✅ More accurate lead tracking for marketing campaigns.

What’s Next? Capturing UTM Data

This setup works great for basic URL tracking, but what if you want to track marketing campaigns, ad sources, or referral traffic?

In my next post, I’ll show you how to capture UTM parameters (like utm_source, utm_medium, and utm_campaign) inside your Webflow forms. It’s a bit more advanced, but totally worth it if you’re running paid ads or multi-channel campaigns.

Stay tuned!

Written By

Sign up for our newsletter

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.