Answered

Get the URL of the typeform page to results

  • 1 February 2023
  • 32 replies
  • 1144 views

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

 

icon

Best answer by jeremielp 1 February 2023, 21:06

View original

32 replies

Userlevel 5
Badge +5

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>

 

Userlevel 7
Badge +5

Thanks for sharing this, @jeremielp ! 😀

Thanks so much @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

Userlevel 7
Badge +5

thanks so much for sharing this, @wristbands !!

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

Userlevel 7
Badge +5

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

Userlevel 1
Badge

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

Userlevel 7
Badge +5

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

Userlevel 7
Badge +5

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

Userlevel 1
Badge

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? 

Userlevel 1
Badge

Thanks @Liz for passing on! 😀

Userlevel 1
Badge

@mathio - is this the article that explains what you were referring to?
https://www.typeform.com/help/a/dynamically-pass-hidden-fields-from-a-url-to-an-embedded-typeform-for-advanced-users-4404652303892/

Userlevel 7
Badge +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.

Userlevel 1
Badge

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

Much appreciated 🙏🏻

Userlevel 7
Badge +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>

 

Userlevel 1
Badge

Outstanding! Thanks so much for your guidance @mathio !

Much appreciated. Have yourself a great day!

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.

Userlevel 7
Badge +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.

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

Userlevel 7
Badge +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.

Badge

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?

Userlevel 7
Badge +5

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

Badge

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.

Userlevel 7
Badge +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>

 

hi @Riinuska @mathio shared a solution here!

Reply