Adding the Source or Page URL to Webflow Forms

Webflow forms make it easy to collect customer information on your website, and converting a form into a symbol means you can use the same form on many different pages. This way, if you ever want to update a form (such as add or remove a field), you don't need to go from page to page and update every single one.

But what if you want to know the page that a customer submits your form on? If you're using the same symbol across many different pages, when someone submits the form you won't be able to tell which page they submitted it on. Because of this, you're going to have to add some custom code that checks the page, and adds that url as a part of the form submission.

This is the result we are looking for, with the page being submitted as a piece of data along with the rest of the users info.

‍

‍

There are a couple of ways to make this happen, but let's look now at the simplest way of implementing it.

The Custom Code

Let's add some custom code in to make things work. First, you want to add in an embed block anywhere in your form, but feel free to keep it below all the other forms fields to keep things tidy.

Here's the code we are going to add into the code embed:

<input type="hidden" id="current-page" data-name="Current Page" />

Through this code, we are telling this input to be hidden, have the id of "current-page", and have the data name as "Current Page", but feel free to set this data name to whatever you prefer, as this is what will show up once the form submits.

Now we need to add a value to the id that tells us what page the form is on. Go into your project settings, click on the custom code tab, and paste this code into the Footer Code section:

<script> $('#current-page').val(location.href); </script>

You can also do this in the page settings, but if your form is across many different pages, it's easy to do it globally through the project settings rather than adding it to every page you have a form on.

Save the changes, and republish your project. The form should also be good to go, so submit some dummy data and check under form submissions in the project settings to make sure it submitted everything correctly.

Here's a couple of test form submissions I've sent through. As you can see, it's pulling through the URL of the page the form was submitted on.

Using with Zapier

To take this one step further, we can use an application such as Zapier to remove the url, be left with just the slug, and then submit the form data to a database.

To start, make a new zap, add in Webflow as the trigger, and make the trigger event a form submission.

Find and connect the right form that is collecting all the submissions, and test the trigger to make sure the data is coming through.

Once you make sure your data looks good, we are going to add in a test formatter to remove the url and just have the slug. Choose Formatter by Zapier, and make the action event "Text".

Select "Replace" from the transform actions, and input the url data connection from the form submission. Then in find, you're going to add in the plain url of your website, and using Replace, it's going to be replaced with nothing. This will delete everything from the url other than the slug.

Click continue and test the action. If all is well, you'll come out with an output of just the slug, as you can see below.

From here, you can send the data to Google Sheets, Airtable, or any other database system you use. You can also use another filter to only let conditions happen the form is submitted on a specific page.

‍

That's it! Now that you're collecting the data on which pages people submit your form on, you have plenty of ways to use this data to improve the pages, segment your customers based on which page they are on, or use filtering to create specific actions from specific pages.

‍