Get the URL of the typeform page to results

Thanks for sharing this, @jeremielp ! 😀

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

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

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

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

Thanks @Liz for passing on! 😀

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.

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>

<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.

<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).

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?

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.