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?
- Add a hidden field named "page-url" to your form (even if it's a Symbol).
- Add a global script to set the hidden field’s value to the current page URL using window.location.href.
- Reuse the form across pages without changes, and optionally include the URL in form notification emails.
You want to automatically capture the current page URL in a form submission in Webflow — including when using the form as a reusable Symbol.
1. Add a Hidden Field to the Form
- In the Webflow Designer, select any form element (even inside a Symbol).
- Add a new field and set its type to Hidden.
- Name the field something like page-url to label why you're collecting this info.
2. Automatically Populate the Hidden Field with the Page URL
- Go to Page Settings > Before </body> tag for any template or page where the form symbol appears.
- Paste the following minimal, inline script:
Note: Since forms use the same name for the hidden field (page-url), this will work across all instances without editing each form individually.
```javascript
<script>
document.addEventListener("DOMContentLoaded", function() {
const urlInputs = document.querySelectorAll('input[name="page-url"]');
urlInputs.forEach(input => {
input.value = window.location.href;
});
});
</script>
```
- This script:
- Waits for the page to load.
- Finds all hidden inputs named
page-url. - Sets their value to the current full URL (including parameters and hash fragments, if any).
3. Use the Form as a Symbol
- Since the form is now a Symbol with a hidden field named
page-url, and the script works globally, you can reuse the form across pages without updating or customizing it per instance.
- No need to hard-code different values or break Symbol usage.
4. Enable the Hidden Field Data in Notifications (Optional)
- In Project Settings > Forms, you can customize the email template to include the
page-urlfield. - This ensures when someone submits the form, you’ll see which exact page it came from.
Summary
Use a hidden field inside your Webflow form Symbol, and add a global script to auto-populate it with window.location.href. This method works universally across all pages using the Symbol and does not require editing the form per page.
