Capture the page URL in native Webflow forms

Step 1 — Get a form

Locate your existing native Webflow form (or add a new one), and add an embed element to the form making sure to nest it inside the form element. We'll use this embed element to create a hidden field that will capture the page URL.

Step 2 — Create a hidden input

Open up the embed element's editor by xxx or xxx, and create a hidden input field using html. Give it an ID so that we can grab this field later (I have used id="current-page"), and give the data field a name that makes sense for your form (I've used data-name="Conversion Page"). Edit as needed, or copy/paste the code below.

<!-- [jonnyrich.com] Form — Create Hidden Fields -->
<input type="hidden" id="current-url" data-name="Submission Page" />			
	

‍

Step 3 — Get the URL

Finally, add a simple snippet to get the current page's URL and set it as the value of the hidden input we just created. Make sure to use the same field ID as the hidden field. Copy the code below:

<!-- [jonnyrich.com] Form - Capture URL -->
<script> $('#current-url').val(location.href) </script>
		
	

‍

Step 4 — Publish and test

Publish to staging and test your form. Now, when your form submits these hidden fields will be sent along with it.

‍

Keep flowing!

Jonny