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>
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
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
Hi @GF1 I’ve answered you in your post.
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
@p1x3lman @mathio might be able to help you answer that!
You can use hidden fields with logic to jump to different question based on hidden field value.
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?
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.
Awesome! Thanks @mathio - if you have some time, would you be able to copy/write the embed code example please?
Much appreciated
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>
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.
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).
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.
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?
Hi @Riinuska Thanks for stopping by the community! I added your post here where we have an answer for this.
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.
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!