How To Add Page URL to WebFlow Forms?

How to Track the URL in Webflow Form Submissions

If you’re using Webflow and have multiple pages with forms on your website, you might be wondering how to track which specific page a form submission came from. In this step-by-step guide, we’ll show you how to add a URL field to your Webflow form submissions. This can be incredibly helpful for gathering insights about user behavior and improving your website’s performance.

---

Step 1: Why Track Form Submission URLs?

When you have forms across different pages of your website, understanding where a customer is filling out the form can help you:

• Identify which pages are driving engagement.
• Optimize underperforming pages.
• Enhance user experience by tailoring content or functionality.

Webflow doesn’t provide this feature out of the box, but with a few simple steps, you can implement it yourself.

---

Step 2: Add a Custom Code Field to Your Webflow Form

1. Open your Webflow project and navigate to the page with the form.
2. Select the form element and click the + button in the Webflow editor to add a new element.
3. Search for Embed and drag it into your form, preferably below the email or name input field.
4. Inside the Embed element, paste the following code: <input type="hidden" name="page_url" id="page_url">

This creates a hidden field in the form that will store the URL of the page.

---

Step 3: Add JavaScript to Capture the Page URL

To automatically populate the hidden field with the current page’s URL, you’ll need to add a small JavaScript snippet.

1. Open a code editor and create a JavaScript file or use the following code: document.addEventListener('DOMContentLoaded', function () { const urlField = document.getElementById('page_url'); if (urlField) { urlField.value = window.location.href; } });
2. Copy this code and add it to your Webflow project:
   • Go to Page Settings > Custom Code.
   • Scroll to the Before Tag section.
   • Paste the code here.
   Note: If you want this functionality across all pages, add the JavaScript code in the Project Settings > Custom Code > Footer Code section.

---

Step 4: Publish Your Changes

1. Save the changes you made and publish your website.
2. Once published, navigate to the page with the form to ensure the hidden field is correctly capturing the URL.
   • Use your browser’s inspect tool to check the form’s HTML structure.
   • Verify that the input field has the correct URL value.

---

Step 5: Test Your Form Submission

1. Go to the published form and submit a test entry.
2. Check the email or CRM where you receive form submissions.
3. Confirm that the URL of the page is included in the submission data.

---

Bonus: Updating URLs Dynamically

If you change the slug or URL of a page, this method will still work seamlessly since the JavaScript dynamically fetches the current page URL each time the page loads.

---

Conclusion

By following these steps, you’ve successfully added URL tracking to your Webflow form submissions. This simple yet powerful feature can provide valuable insights into user behavior and help you optimize your website for better engagement.

If you found this guide helpful, consider subscribing to our YouTube channel for more tutorials on Webflow, Shopify, and WordPress. Let us know in the comments if you’d like us to cover more Webflow tips and tricks!