Webflow sync, pageviews & more.
NEW

Is there a simple way in Webflow to automatically include the current URL in a form, without having to edit each form separately and without compromising the ability to use the form as a symbol?

TL;DR
  • Add a hidden input named page_url to your form symbol.
  • Use a script with window.location.href to dynamically populate the hidden field on page load.

To automatically capture the current page URL in Webflow forms, even when the form is used as a symbol, you can use a simple script and dynamic hidden fields—without editing each form individually.

1. Add a Hidden Input to the Form Symbol

  • Open your form symbol in the Designer.
  • Inside the Form Block, add a new Hidden input field.
  • Set its Name (not Label) to something meaningful, like page_url.
  • You can leave the Value empty for now—it will be populated dynamically.

2. Use Custom Code to Populate the Hidden Field

  • Go to your project’s Page Settings or add this code inside an Embed element placed at the bottom of your site (on a global layout, like a footer symbol).
  • Use the following script to dynamically set the current URL into any input with the name page_url:
<script>  document.addEventListener("DOMContentLoaded", function () {    const url = window.location.href;    document.querySelectorAll('input[name="page_url"]').forEach(function(input) {      input.value = url;    });  });</script>
This script waits for the page to load, then assigns the current URL to any form input with the name page_url.

3. Keep Using the Form As a Symbol

  • Because the input name remains consistent and the URL is dynamically populated via script, you can freely reuse the form symbol on multiple pages.
  • No per-form customization is needed—every instance of the form will automatically include the correct page URL on submission.

Summary

To include the current page URL in a Webflow form without editing each form individually, add a hidden field (e.g., page_url) to your form symbol and use a script to fill it dynamically with window.location.href. This works across all pages where the symbol is used, maintaining full reusability.

Rate this answer

Other Webflow Questions