Skip to main content
Answered

Get the URL of the typeform page to results


Hi,

 

so we have 8 different typeforms across a lot of pages on our website. 

 

For example “Book a demo”-typeform. But that typeform is in a couple of places on the site.

 

What I want to see in the results are from which URL the respondent came without creating an own Typeform for this.

 

So if person A fills a “Book a demo”-typeform in page A i want to extract that URL to results.

And the URL for Person B who fills out a “Book a demo”-typeform in page B.

How can I do that?

 

Best regards,

Tomi

 

Best answer by jeremielp

You can create a url_form hidden field in your form, and then pass the URL of the page when loading the form dynamically.

 

<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('<form-id>', {
    container: document.getElementById('tf'),
    hidden: { url_form: window.location.href }
  });
</script>

 

View original

Forum|alt.badge.img+5
  • Community Wizard
  • February 1, 2023

You can create a url_form hidden field in your form, and then pass the URL of the page when loading the form dynamically.

 

<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('<form-id>', {
    container: document.getElementById('tf'),
    hidden: { url_form: window.location.href }
  });
</script>

 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • February 2, 2023

Thanks for sharing this, @jeremielp ! 😀


  • Explorer
  • February 2, 2023

Thanks so much @jeremielp ! 


  • Navigating the Land
  • May 16, 2023

For me, we are using the Popup website embed option, and here’s what my code looks like:
 

<button

  id="typeform-button"

  data-tf-popup="my-typeform-id"

  data-tf-opacity="100"

  data-tf-hide-headers

  data-tf-size="100"

  data-tf-iframe-props="title=my-title"

  data-tf-auto-close="5000"

  data-tf-medium="snippet"

>

  Fill out form

</button>

<script>

  const pageUrl = window.location.href

  const button = document.getElementById('typeform-button')

  button.dataset.tfHidden = ‘page_url=' + pageUrl

</script>

<script src="//embed.typeform.com/next/embed.js"></script>

 

What I have above is just a modified version of the default html code typeform provides in the Share tab of your form. Note that in place of “my-typeform-id” and “my-title”, you should put your actual typeform id and title. And there’s some other styling code that typeform normally provides but I omitted it above for simplicity.

 

Also, make sure to actually add the hidden field to your form schema (and publish your changes!), as explained in Using Hidden Fields. And here is another article that adds some additional context to my code above: Use Hidden Fields in embedded typeforms


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • May 19, 2023

thanks so much for sharing this, @wristbands !!


  • Explorer
  • May 24, 2023

Hello,

I need this solution, but cannot understand how to implement. Any step-by-step guide?

I need to know the exact URL/page where the form has been filled, to be shown on the email contact details that we get with the answers.

 

Thanks


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • May 26, 2023

Hi @GF1 I’ve answered you in your post. 😀


p1x3lman
Forum|alt.badge.img
  • Explorer
  • June 2, 2023

Hey @Liz !
Is it possible to use this solution to declare the page_URL as a variable to instruct the typeform to ‘jump’ to a particular section in the form?
I’m trying to use the 1 typeform across multiple URLs so that all response results are kept in the one file.

Thanks for the consideration!

 

cheers,

JD


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • June 2, 2023

@p1x3lman @mathio might be able to help you answer that!


mathio-tf
Typeform
Forum|alt.badge.img+5

You can use hidden fields with logic to jump to different question based on hidden field value.


p1x3lman
Forum|alt.badge.img
  • Explorer
  • June 6, 2023

Hey @mathio - thanks for your response!
Cool.


How do I set / get the URL from the browser into a hidden field then to a typeform variable? 


p1x3lman
Forum|alt.badge.img
  • Explorer
  • June 6, 2023

Thanks @Liz for passing on! 😀


p1x3lman
Forum|alt.badge.img
  • Explorer
  • June 6, 2023

mathio-tf
Typeform
Forum|alt.badge.img+5

Yes, that article is correct. If you want to pass values directly from your page URL to typeform as hidden field you can list it in data-tf-transitive-search-params attribute.


p1x3lman
Forum|alt.badge.img
  • Explorer
  • June 6, 2023

Awesome! Thanks @mathio - if you have some time, would you be able to copy/write the embed code example please? 

Much appreciated 🙏🏻


mathio-tf
Typeform
Forum|alt.badge.img+5

You can generate such embed code yourself via share page of your form by enabling “Read URL parameters” in the “Advanced” tab on right.

An example of such embed code would be eg this:

<div data-tf-widget="xxx" 
     data-tf-transitive-search-params 
     style="width:100%;height:500px"
></div>
​​​​​​​<script src="//embed.typeform.com/next/embed.js"></script>

 


p1x3lman
Forum|alt.badge.img
  • Explorer
  • June 7, 2023

Outstanding! Thanks so much for your guidance @mathio !

Much appreciated. Have yourself a great day!


jeremielp wrote:

You can create a url_form hidden field in your form, and then pass the URL of the page when loading the form dynamically.

 

<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('<form-id>', {
    container: document.getElementById('tf'),
    hidden: { url_form: window.location.href }
  });
</script>

 

Can I ask how you implemented this code for a standard code snippet.
My original thought was to adapt your code to mine this way:

<div data-tf-widget="JLgmSPT6" data-tf-opacity="100" data-tf-iframe-props="title=Request An Estimate" data-tf-transitive-search-params data-tf-medium="snippet" data-tf-hidden="url_form=" style="width:100%;height:500px;"></div><script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('<form-id>', {
    container: document.getElementById('tf'),
    hidden: { url_form: window.location.href }
  });
</script>

But I have yet to actually pass the URL the form was submitted from.

 

Please help.


mathio-tf
Typeform
Forum|alt.badge.img+5

Hello @LittleGreenDevelopment 

you should not combine the data-tf- attributes with JavaScript API. In your case, you should create your embed using only JavaScript API. After you move all data-tf- attributes to options object, your code should look like this:

<div id="tf" style="width:100%;height:500px;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('JLgmSPT6', {
    container: document.getElementById('tf'),
    opacity: 100,
    iframeProps: { title: 'Request An Estimate' },
    transitiveSearchParams: true,
    hidden: { url_form: window.location.href }
  });
</script>

Do not forget to create a url_form hidden field in your typeform to make sure you see the value in your responses.


  • Explorer
  • August 18, 2023
jeremielp wrote:

You can create a url_form hidden field in your form, and then pass the URL of the page when loading the form dynamically.

 

<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('<form-id>', {
    container: document.getElementById('tf'),
    hidden: { url_form: window.location.href }
  });
</script>

 

Hi @jeremielp is there something you can add to this so that it resizes to show the typeform in full (the code works perfectly thanks but is showing a scrollbar when embedded on my website).


mathio-tf
Typeform
Forum|alt.badge.img+5

Hi @knxrc23 

You should be able to set the width and height of your typeform by adding style attribute to the div element like this:

<div id="tf" style="width:100%;height:600px;"></div>

Feel free to use any values you like.


Forum|alt.badge.img
  • Explorer
  • November 1, 2023

If I embed same form (=same code snippet) on different pages on our website, is there a way to track from which page the form was filled?


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • November 1, 2023

Hi @Riinuska Thanks for stopping by the community! I added your post here where we have an answer for this. 😀


Forum|alt.badge.img
  • Explorer
  • November 3, 2023
Liz wrote:

Hi @Riinuska Thanks for stopping by the community! I added your post here where we have an answer for this. 😀

Thanks @Liz but sorry to say that I don’t understand a word. Would be handy to get simple instructions step by step what to do to get this done.


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • November 3, 2023
mathio wrote:

You can generate such embed code yourself via share page of your form by enabling “Read URL parameters” in the “Advanced” tab on right.

An example of such embed code would be eg this:

<div data-tf-widget="xxx" 
     data-tf-transitive-search-params 
     style="width:100%;height:500px"
></div>
​​​​​​​<script src="//embed.typeform.com/next/embed.js"></script>

 

hi @Riinuska @mathio shared a solution here!


Reply